leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Continue to fuck around with the color scheme a bit at a time

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2024-04-20 03:27:11 -06:00
parent 43d5d65366
commit 3dfa9bd361
2 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/main.js
View File

@ -2803,9 +2803,9 @@ class Splash extends PrimaryView {
else { else {
progress.querySelector('.-time').textContent = util.format_duration(packinfo.total_abstime / TICS_PER_SECOND, 2); progress.querySelector('.-time').textContent = util.format_duration(packinfo.total_abstime / TICS_PER_SECOND, 2);
let levels = ( let levels = (
`cleared ${packinfo.cleared_levels} of ${packinfo.total_levels} ` `${packinfo.cleared_levels} of ${packinfo.total_levels} `
+ `level${packinfo.total_levels === 1 ? "" : "s"}, ` + `level${packinfo.total_levels === 1 ? "" : "s"} cleared · `
+ `${packinfo.aidless_levels}★ without aid`); + `${packinfo.aidless_levels}★ unaided`);
level_el.textContent = levels; level_el.textContent = levels;
level_el.style.setProperty('--cleared', packinfo.cleared_levels / packinfo.total_levels); level_el.style.setProperty('--cleared', packinfo.cleared_levels / packinfo.total_levels);
level_el.style.setProperty('--aidless', packinfo.aidless_levels / packinfo.total_levels); level_el.style.setProperty('--aidless', packinfo.aidless_levels / packinfo.total_levels);

50
style.css
View File

@ -17,16 +17,16 @@ body {
background-size: 12em; background-size: 12em;
color: #ececec; color: #ececec;
--main-hue: 350; --main-hue: 345;
--hover-hue: 5; --hover-hue: 8;
--selected-hue: 10; --selected-hue: 320;
--panel-bg-color: hsl(var(--main-hue), 10%, 10%); --panel-bg-color: hsl(var(--main-hue), 20%, 10%);
--button-bg-color: hsl(var(--main-hue), 40%, 20%); --button-bg-color: hsl(var(--main-hue), 50%, 20%);
--button-bg-gradient: linear-gradient(to bottom, var(--button-bg-shadow-color), transparent 75%); --button-bg-gradient: linear-gradient(to bottom, var(--button-bg-shadow-color), transparent 75%);
--button-bg-shadow-color: #fff1; --button-bg-shadow-color: #fff1;
--button-bg-hover-color: hsl(var(--hover-hue), 50%, 35%); --button-bg-hover-color: hsl(var(--hover-hue), 60%, 35%);
--generic-bg-hover-on-white: hsl(var(--hover-hue), 60%, 90%); --generic-bg-hover-on-white: hsl(var(--hover-hue), 60%, 90%);
--generic-bg-selected-on-white: hsl(var(--selected-hue), 75%, 90%); --generic-bg-selected-on-white: hsl(var(--selected-hue), 50%, 85%);
--generic-border-selected-on-white: hsl(var(--selected-hue), 60%, 75%); --generic-border-selected-on-white: hsl(var(--selected-hue), 60%, 75%);
} }
@ -55,12 +55,12 @@ button,
color: white; color: white;
background-color: var(--button-bg-color); background-color: var(--button-bg-color);
background-image: var(--button-bg-gradient); background-image: var(--button-bg-gradient);
border: 1px solid hsl(var(--main-hue), 10%, 7.5%); border: 1px solid hsl(var(--main-hue), 10%, 2.5%);
box-shadow: box-shadow:
inset 0 0 1px 1px #fff2, inset 0 0 3px 1px #ffffff18,
0 1px 1px hsl(var(--main-hue), 10%, 7.5%); 0 1px 1px hsl(var(--main-hue), 10%, 7.5%);
border-radius: 0.25em; border-radius: 0.25em;
text-shadow: 0 1px 0 #0004; text-shadow: 0 1px 0 #0006;
text-transform: lowercase; text-transform: lowercase;
cursor: pointer; cursor: pointer;
} }
@ -75,10 +75,10 @@ button:active,
z-index: 1; z-index: 1;
} }
button:enabled.button-bright { button:enabled.button-bright {
background-color: hsl(var(--main-hue), 60%, 30%); background-color: hsl(var(--main-hue), 60%, 35%);
} }
button:enabled.button-bright:hover { button:enabled.button-bright:hover {
background-color: hsl(var(--hover-hue), 65%, 40%); background-color: hsl(var(--hover-hue), 65%, 50%);
} }
button:disabled { button:disabled {
color: #606060; color: #606060;
@ -844,9 +844,9 @@ pre.stack-trace {
height: auto; height: auto;
} }
#splash h2 { #splash h2 {
border-bottom: 1px solid #404040; border-bottom: 1px solid hsl(var(--main-hue), 10%, 30%);
color: #909090; color: hsl(var(--main-hue), 40%, 75%);
text-shadow: 0 1px #0004; text-shadow: 0 1px #000c;
} }
#splash * + h2 { #splash * + h2 {
margin-top: 1rem; margin-top: 1rem;
@ -983,7 +983,7 @@ pre.stack-trace {
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 0.25em; padding: 0.25em;
border: 1px solid hsl(var(--main-hue), 25%, 40%); border: 1px solid hsl(var(--main-hue), 40%, 40%);
text-shadow: 0 1px 1px black; text-shadow: 0 1px 1px black;
text-align: center; text-align: center;
} }
@ -998,11 +998,11 @@ pre.stack-trace {
} }
.played-pack-list .-progress > .-levels::before { .played-pack-list .-progress > .-levels::before {
width: calc(var(--cleared) * 100%); width: calc(var(--cleared) * 100%);
background: hsl(var(--main-hue), 25%, 30%); background: hsl(var(--main-hue), 50%, 25%);
} }
.played-pack-list .-progress > .-levels::after { .played-pack-list .-progress > .-levels::after {
width: calc(var(--aidless) * 100%); width: calc(var(--aidless) * 100%);
background: hsl(var(--main-hue), 25%, 40%); background: hsl(var(--main-hue), 40%, 40%);
} }
.played-pack-list .-progress > .-score { .played-pack-list .-progress > .-score {
grid-area: score; grid-area: score;
@ -2219,7 +2219,8 @@ svg.level-editor-overlay {
* consistent size at any zoom level */ * consistent size at any zoom level */
--scale: 1; --scale: 1;
/* default svg properties */ /* default svg properties */
stroke-width: calc(0.125px / var(--scale)); --stroke-width: calc(0.125 / var(--scale));
stroke-width: calc(1px * var(--stroke-width));
fill: none; fill: none;
} }
svg.level-editor-overlay .overlay-transient { svg.level-editor-overlay .overlay-transient {
@ -2229,8 +2230,12 @@ svg.level-editor-overlay .overlay-transient.--visible {
display: initial; display: initial;
} }
svg.level-editor-overlay rect.overlay-pencil-cursor { svg.level-editor-overlay rect.overlay-pencil-cursor {
stroke: hsla(var(--main-hue), 100%, 90%, 0.75); stroke: hsla(var(--main-hue), 80%, 40%, 0.9);
fill: hsla(var(--main-hue), 100%, 75%, 0.25); fill: hsla(var(--main-hue), 100%, 75%, 0.25);
/* Automatically scale the cursor up just enough that the outline appears outside the cell,
* rather than straddling it */
transform: scale(calc(100% * (1 + var(--stroke-width))));
transform-origin: 0.5px 0.5px;
} }
svg.level-editor-overlay rect.overlay-pending-selection { svg.level-editor-overlay rect.overlay-pending-selection {
stroke: hsla(var(--selected-hue), 100%, 60%, 0.5); stroke: hsla(var(--selected-hue), 100%, 60%, 0.5);
@ -2411,8 +2416,11 @@ svg.level-editor-overlay text.overlay-edit-tip {
border-radius: 2px; border-radius: 2px;
box-shadow: none; box-shadow: none;
} }
.icon-button-set button:hover {
background: hsl(var(--hover-hue), 40%, 30%);
}
.icon-button-set button.-selected { .icon-button-set button.-selected {
background: hsl(var(--selected-hue), 90%, 70%); background: hsl(var(--selected-hue), 50%, 75%);
} }
.icon-button-set button img { .icon-button-set button img {
display: block; display: block;