Gregory Leeman
7 months ago
12 changed files with 446 additions and 389 deletions
@ -1,6 +0,0 @@ |
|||||
{ |
|
||||
"parserOptions": { |
|
||||
"ecmaVersion": 2020, |
|
||||
"sourceType": "module" |
|
||||
} |
|
||||
} |
|
||||
@ -1,8 +1,21 @@ |
|||||
import globals from "globals"; |
// For ES Module Syntax
|
||||
import pluginJs from "@eslint/js"; |
|
||||
|
|
||||
|
|
||||
export default [ |
export default [ |
||||
{languageOptions: { globals: globals.browser }}, |
{ |
||||
pluginJs.configs.recommended, |
languageOptions: { |
||||
|
ecmaVersion: "latest", // Or specify a specific version like 2021, 2020, etc.
|
||||
|
sourceType: "module", // "module" for ES modules, "script" for non-modular code
|
||||
|
globals: { |
||||
|
// Define global variables that are predefined
|
||||
|
browser: true, |
||||
|
node: true, |
||||
|
es6: true, |
||||
|
}, |
||||
|
}, |
||||
|
rules: { |
||||
|
"no-unused-vars": "off", |
||||
|
"semi": ["error", "always"], |
||||
|
"quotes": ["error", "double"] |
||||
|
} |
||||
|
} |
||||
]; |
]; |
||||
|
|
||||
|
|||||
@ -0,0 +1,243 @@ |
|||||
|
:root { |
||||
|
--white: #FFFFFF; |
||||
|
--button: #DDE4E7; |
||||
|
--hover: #B3BBBD; |
||||
|
--active: #8F9598; |
||||
|
/* --background: #7E888B; */ |
||||
|
--background: #949C9E; |
||||
|
--black: #000000; |
||||
|
} |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'VT323'; |
||||
|
src: url('fonts/VT323-Regular.ttf') format('truetype'); |
||||
|
} |
||||
|
|
||||
|
div { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
width: 100vw; |
||||
|
font-family: 'VT323', monospace; |
||||
|
background-color: var(--background); |
||||
|
color: var(--black); |
||||
|
} |
||||
|
|
||||
|
#menu-bar, |
||||
|
#info-bar, |
||||
|
#tool-bar, |
||||
|
#layer-bar { |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
#menu-bar { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
#menu-bar, #info-bar { |
||||
|
padding: 10px; |
||||
|
background-color: var(--button); |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 10px; |
||||
|
justify-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
#menu-bar { |
||||
|
order: 1; |
||||
|
} |
||||
|
|
||||
|
#info-bar { |
||||
|
order: 3; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
#tool-bar, #layer-bar { |
||||
|
display: flex; |
||||
|
padding: 10px; |
||||
|
padding-top: 0; |
||||
|
padding-bottom: 0; |
||||
|
background-color: var(--button); |
||||
|
gap: 10px; |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
#studio { |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
border: 1px solid; |
||||
|
cursor: crosshair; |
||||
|
} |
||||
|
|
||||
|
#easel { |
||||
|
position: absolute; |
||||
|
border: 1px solid; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
background-color: var(--button); |
||||
|
border: 1px solid; |
||||
|
border-radius: 2px; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
text-align: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.button:hover { |
||||
|
background-color: var(--hover); |
||||
|
} |
||||
|
|
||||
|
.button.active, .button:active { |
||||
|
background-color: var(--active); |
||||
|
} |
||||
|
|
||||
|
.bar-button { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
padding: 5px; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.puck { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
border: 1px solid; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.key-hint { |
||||
|
display: block; |
||||
|
height: 13px; |
||||
|
width: 9px; |
||||
|
line-height: 8px; |
||||
|
position: absolute; |
||||
|
top: 2px; |
||||
|
left: 1px; |
||||
|
font-size: 1em; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
border-radius: 0 0 5px 0; |
||||
|
text-shadow: |
||||
|
1px 1px 0 #000, |
||||
|
-1px 1px 0 #000, |
||||
|
-1px -1px 0 #000, |
||||
|
1px -1px 0 #000; |
||||
|
color: var(--white); |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
#layer-controllers { |
||||
|
background-color: var(--background); |
||||
|
border: 1px solid; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.layer-controller { |
||||
|
background-color: var(--button); |
||||
|
height: 40px; |
||||
|
width: 90px; |
||||
|
border: 1px solid; |
||||
|
border-radius: 2px; |
||||
|
padding: 2px; |
||||
|
position: relative; |
||||
|
margin: 1px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
gap: 2px; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.layer-controller.active { |
||||
|
background-color: var(--active); |
||||
|
} |
||||
|
|
||||
|
.layer-controller:hover { |
||||
|
background-color: var(--hover); |
||||
|
} |
||||
|
|
||||
|
.layer-add-button { |
||||
|
background-color: var(--button); |
||||
|
height: 12px; |
||||
|
width: 100%; |
||||
|
border: 1px solid; |
||||
|
border-radius: 2px; |
||||
|
position: relative; |
||||
|
margin: 1px; |
||||
|
text-align: center; |
||||
|
font-size: .7em; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.layer-add-button:hover { |
||||
|
background-color: var(--hover); |
||||
|
} |
||||
|
|
||||
|
.top-left { |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.bottom-right { |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.top-right { |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.bottom-left { |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.layer-preview { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
border: 1px solid; |
||||
|
object-fit: contain; |
||||
|
background-color: var(--background); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.layer-move-buttons, .layer-merge-buttons { |
||||
|
font-size: .7em; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2px; |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.layer-delete-button { |
||||
|
font-size: .7em; |
||||
|
flex-grow: 1; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.layer-move-button, .layer-merge-button { |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
Loading…
Reference in new issue