mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
Add stylelint (#139)
This commit is contained in:
Will Scullin
GitHub
parent
fe955fba41
commit
c5faad2f9f
2
.stylelintignore
Normal file
2
.stylelintignore
Normal file
@ -0,0 +1,2 @@
|
||||
css/apple2.css
|
||||
coverage
|
||||
10
.stylelintrc.json
Normal file
10
.stylelintrc.json
Normal 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_-]+$"
|
||||
}
|
||||
}
|
||||
@ -9,13 +9,17 @@ body {
|
||||
background: black;
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
a[role="button"],
|
||||
input[type="file"]::file-selector-button {
|
||||
background: #44372C;
|
||||
background: #44372c;
|
||||
color: #fff;
|
||||
padding: 2px 8px;
|
||||
border: 1px outset #66594E;
|
||||
border: 1px outset #66594e;
|
||||
border-radius: 3px;
|
||||
font-size: 15px;
|
||||
min-width: 75px;
|
||||
@ -24,15 +28,15 @@ input[type="file"]::file-selector-button {
|
||||
button:hover,
|
||||
a[role="button"]:hover,
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: #55473D;
|
||||
border: 1px outset #66594E;
|
||||
background-color: #55473d;
|
||||
border: 1px outset #66594e;
|
||||
}
|
||||
|
||||
button:active,
|
||||
a[role="button"]:active,
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: #22150A;
|
||||
border: 1px outset #44372C;
|
||||
background-color: #22150a;
|
||||
border: 1px outset #44372c;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
@ -41,10 +45,6 @@ input[type="file"]::file-selector-button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.outer {
|
||||
width: 620px;
|
||||
display: none;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
.diskLight {
|
||||
margin: 5px;
|
||||
background-image: url(../../../css/green-off-16.png);
|
||||
background-image: url("../../../css/green-off-16.png");
|
||||
background-size: 16px 16px;
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.diskLight.on {
|
||||
background-image: url(../../../css/green-on-16.png);
|
||||
background-image: url("../../../css/green-on-16.png");
|
||||
}
|
||||
|
||||
.diskLabel {
|
||||
@ -30,9 +30,10 @@
|
||||
|
||||
@media only screen and (min-resolution: 1.25dppx) {
|
||||
.diskLight {
|
||||
background-image: url(../../../css/green-off-32.png);
|
||||
background-image: url("../../../css/green-off-32.png");
|
||||
}
|
||||
|
||||
.diskLight.on {
|
||||
background-image: url(../../../css/green-on-32.png);
|
||||
background-image: url("../../../css/green-on-32.png");
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
margin-right: 4px;
|
||||
overflow: hidden;
|
||||
padding: 4px;
|
||||
font-family: Courier;
|
||||
font-family: Courier, monospace;
|
||||
font-size: 12px;
|
||||
width: 60px;
|
||||
height: 15px;
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
.reset {
|
||||
background: #44372C;
|
||||
border-left: 3px solid #65594D;
|
||||
border-top: 3px solid #65594D;
|
||||
border-right: 3px solid #110E0D;
|
||||
border-bottom: 3px solid #110E0D;
|
||||
background: #44372c;
|
||||
border-left: 3px solid #65594d;
|
||||
border-top: 3px solid #65594d;
|
||||
border-right: 3px solid #110e0d;
|
||||
border-bottom: 3px solid #110e0d;
|
||||
|
||||
/* border: 5px outset #66594E; */
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
font: 9px Helvetica;
|
||||
font: 9px Helvetica, sans-serif;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
margin-left: 10px;
|
||||
@ -18,16 +19,16 @@
|
||||
}
|
||||
|
||||
.reset:hover {
|
||||
background: #44372C;
|
||||
border: 3px outset #66594E;
|
||||
background: #44372c;
|
||||
border: 3px outset #66594e;
|
||||
}
|
||||
|
||||
.reset:active {
|
||||
background-color: #22150A;
|
||||
border-left: 3px solid #44372C;
|
||||
border-top: 3px solid #44372C;
|
||||
border-right: 3px solid #000000;
|
||||
border-bottom: 3px solid #000000;
|
||||
background-color: #22150a;
|
||||
border-left: 3px solid #44372c;
|
||||
border-top: 3px solid #44372c;
|
||||
border-right: 3px solid #000;
|
||||
border-bottom: 3px solid #000;
|
||||
}
|
||||
|
||||
:global(.full-page) .reset {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
.diskLight {
|
||||
margin: 5px;
|
||||
background-image: url(../../../css/red-off-16.png);
|
||||
background-image: url("../../../css/red-off-16.png");
|
||||
background-size: 16px 16px;
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.diskLight.on {
|
||||
background-image: url(../../../css/red-on-16.png);
|
||||
background-image: url("../../../css/red-on-16.png");
|
||||
}
|
||||
|
||||
.diskLabel {
|
||||
@ -30,9 +30,10 @@
|
||||
|
||||
@media only screen and (min-resolution: 1.25dppx) {
|
||||
.diskLight {
|
||||
background-image: url(../../../css/red-off-32.png);
|
||||
background-image: url("../../../css/red-off-32.png");
|
||||
}
|
||||
|
||||
.diskLight.on {
|
||||
background-image: url(../../../css/red-on-32.png);
|
||||
background-image: url("../../../css/red-on-32.png");
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,12 +25,7 @@
|
||||
margin: 0;
|
||||
padding: 3px 0 0 10;
|
||||
color: black;
|
||||
font-family: "Adobe Garamond Pro",Garamond,Times;
|
||||
font-family: "Adobe Garamond Pro", Garamond, Times, serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.motter {
|
||||
font-family: "Motter Tektura";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 42px;
|
||||
font-family: Helvetica;
|
||||
font-family: Helvetica, sans-serif;
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
@ -58,25 +58,27 @@
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: #44372C;
|
||||
background-color: #44372c;
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-left: 5px solid #65594D;
|
||||
border-top: 5px solid #65594D;
|
||||
border-right: 5px solid #110E0D;
|
||||
border-bottom: 5px solid #110E0D;
|
||||
border-left: 5px solid #65594d;
|
||||
border-top: 5px solid #65594d;
|
||||
border-right: 5px solid #110e0d;
|
||||
border-bottom: 5px solid #110e0d;
|
||||
|
||||
/* border: 5px outset #66594E; */
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pressed {
|
||||
background-color: #22150A;
|
||||
border-left: 5px solid #44372C;
|
||||
border-top: 5px solid #44372C;
|
||||
border-right: 5px solid #000000;
|
||||
border-bottom: 5px solid #000000;
|
||||
background-color: #22150a;
|
||||
border-left: 5px solid #44372c;
|
||||
border-top: 5px solid #44372c;
|
||||
border-right: 5px solid #000;
|
||||
border-bottom: 5px solid #000;
|
||||
|
||||
/* border: 5px outset #44372C; */
|
||||
}
|
||||
|
||||
@ -179,7 +181,15 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 24px;
|
||||
bottom: 1px;
|
||||
@ -190,22 +200,14 @@
|
||||
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 {
|
||||
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");
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
background: rgb(0 0 0 / 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -30,10 +30,10 @@
|
||||
font-size: 14px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #44372C;
|
||||
background: #44372c;
|
||||
color: #fff;
|
||||
padding: 5px 11px;
|
||||
border: 1px outset #66594E;
|
||||
border: 1px outset #66594e;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
}
|
||||
@ -64,7 +64,8 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.modalFooter a[role="button"], .modalFooter button {
|
||||
.modalFooter a[role="button"],
|
||||
.modalFooter button {
|
||||
margin: 0 0 0 5px;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.printer {
|
||||
background: white;
|
||||
font: fixed;
|
||||
font: monospace;
|
||||
width: 60em;
|
||||
padding: 5em;
|
||||
height: 60vh;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.progressContainer {
|
||||
width: 320px;
|
||||
height: 20px;
|
||||
background: #000
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
|
||||
:global(.mono) {
|
||||
filter: url('#green');
|
||||
filter: url("#green");
|
||||
}
|
||||
|
||||
.display {
|
||||
margin: 5px auto 10px auto;
|
||||
margin: 5px auto 10px;
|
||||
}
|
||||
|
||||
:global(.full-page) .display {
|
||||
@ -15,7 +14,7 @@
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: fixed;
|
||||
top:0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@ -24,19 +23,6 @@
|
||||
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 {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
@ -51,7 +37,6 @@
|
||||
margin: initial;
|
||||
padding: 0;
|
||||
width: initial;
|
||||
height: 384px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
@ -60,11 +45,18 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(.scanlines):after {
|
||||
:global(.scanlines)::after {
|
||||
display: block;
|
||||
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);
|
||||
content: '';
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
transparent 1px,
|
||||
rgb(0 0 0 / 50%) 1px,
|
||||
rgb(0 0 0 / 50%) 2px
|
||||
);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -72,15 +64,20 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
: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);
|
||||
:global(.full-page) :global(.scanlines)::after {
|
||||
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 {
|
||||
cursor: crosshair;
|
||||
-moz-image-rendering: -moz-crisp-edges;
|
||||
-webkit-image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: crisp-edges;
|
||||
width: 592px;
|
||||
height: 416px;
|
||||
touch-action: manipulation;
|
||||
@ -91,14 +88,6 @@
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.screen:-webkit-full-screen {
|
||||
background-color: black;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
:global(.full-page) .screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
1575
package-lock.json
generated
1575
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@
|
||||
"build": "rimraf dist/* && webpack --mode=production",
|
||||
"dev": "webpack serve --mode=development",
|
||||
"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",
|
||||
"test": "jest"
|
||||
},
|
||||
@ -54,6 +54,9 @@
|
||||
"raw-loader": "^4.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"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-loader": "^9.3.0",
|
||||
"typescript": "^4.7.3",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user