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"; |
|||
import pluginJs from "@eslint/js"; |
|||
|
|||
|
|||
// For ES Module Syntax
|
|||
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