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

Recolor the whole thing to pinkish-orange

Browse Source 
You know.  Lexy colors.  Seems to make sense.

Also fixed several places I just hated the color scheme, such as the
hover color in popup menus and the title bar in dialogs.  Woohoo.
This commit is contained in:
Eevee (Evelyn Woods) 2024-04-16 23:44:28 -06:00
parent e1e99e73e7
commit 48482b2a65
1 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
style.css
View File

@ -12,19 +12,22 @@ body {
font-family: Ubuntu, Source Sans Pro, DejaVu Sans, sans-serif;
line-height: 1.33;
background: hsl(220, 5%, 5%);
background: hsl(var(--main-hue), 5%, 5%);
background-image: url(background.svg);
background-size: 12em;
color: #ececec;
--panel-bg-color: hsl(220, 10%, 15%);
--button-bg-color: hsl(220, 20%, 25%);
--main-hue: 350;
--hover-hue: 5;
--selected-hue: 10;
--panel-bg-color: hsl(var(--main-hue), 10%, 10%);
--button-bg-color: hsl(var(--main-hue), 40%, 20%);
--button-bg-gradient: linear-gradient(to bottom, var(--button-bg-shadow-color), transparent 75%);
--button-bg-shadow-color: #fff1;
--button-bg-hover-color: hsl(220, 30%, 30%);
--generic-bg-hover-on-white: hsl(220, 60%, 90%);
--generic-bg-selected-on-white: hsl(220, 60%, 85%);
--generic-border-selected-on-white: hsl(220, 60%, 75%);
--button-bg-hover-color: hsl(var(--hover-hue), 50%, 35%);
--generic-bg-hover-on-white: hsl(var(--hover-hue), 60%, 90%);
--generic-bg-selected-on-white: hsl(var(--selected-hue), 75%, 90%);
--generic-border-selected-on-white: hsl(var(--selected-hue), 60%, 75%);
}
/* Generic element styling */
@ -52,11 +55,12 @@ button,
color: white;
background-color: var(--button-bg-color);
background-image: var(--button-bg-gradient);
border: 1px solid hsl(220, 10%, 7.5%);
border: 1px solid hsl(var(--main-hue), 10%, 7.5%);
box-shadow:
inset 0 0 1px 1px #fff2,
0 1px 1px hsl(220, 10%, 7.5%);
0 1px 1px hsl(var(--main-hue), 10%, 7.5%);
border-radius: 0.25em;
text-shadow: 0 1px 0 #0004;
text-transform: lowercase;
cursor: pointer;
}
@ -71,10 +75,10 @@ button:active,
z-index: 1;
}
button:enabled.button-bright {
background-color: hsl(220, 50%, 25%);
background-color: hsl(var(--main-hue), 60%, 30%);
}
button:enabled.button-bright:hover {
background-color: hsl(220, 70%, 30%);
background-color: hsl(var(--hover-hue), 65%, 40%);
}
button:disabled {
color: #606060;
@ -88,7 +92,7 @@ button.button-big {
padding: 1em;
}
button.--button-glow-ok {
background: hsl(220, 100%, 50%);
background: hsl(var(--main-hue), 100%, 50%);
}
button.--button-glow {
transition: background-color 0.5s ease-out;
@ -154,7 +158,7 @@ a:visited {
text-decoration: underline dotted;
}
a:link {
color: hsl(220, 50%, 75%);
color: hsl(var(--main-hue), 50%, 75%);
}
a:visited {
color: hsl(255, 50%, 75%);
@ -212,11 +216,11 @@ svg.svg-icon {
}
button.--pressed,
.radio-faux-button-set > label > input:checked + span {
background: hsl(220, 80%, 50%);
background: hsl(var(--main-hue), 80%, 50%);
box-shadow:
inset 0 1px 3px 1px hsl(220, 50%, 15%),
inset 0 0.25em 1em 0.5em hsl(220, 50%, 30%),
0 1px 1px hsl(220, 10%, 10%)
inset 0 1px 3px 1px hsl(var(--main-hue), 50%, 15%),
inset 0 0.25em 1em 0.5em hsl(var(--main-hue), 50%, 30%),
0 1px 1px hsl(var(--main-hue), 10%, 10%)
}
.button-row {
@ -256,7 +260,7 @@ button.--pressed,
min-width: 10vw;
border: 1px solid #444;
color: black;
background: hsl(220, 20%, 95%);
background: hsl(var(--main-hue), 20%, 95%);
box-shadow: 0 1px 3px 1px #0009;
}
.popup-menu > li {
@ -264,8 +268,8 @@ button.--pressed,
cursor: pointer;
}
.popup-menu > li:hover {
color: hsl(220, 90%, 10%);
background: hsl(220, 90%, 75%);
color: hsl(var(--hover-hue), 90%, 10%);
background: hsl(var(--hover-hue), 90%, 85%);
}
.dialog {
display: flex;
@ -277,16 +281,20 @@ button.--pressed,
border: 1px solid black;
color: black;
background: #f4f4f4;
box-shadow: 0 1px 3px #000c;
box-shadow: 0 1px 6px #000c;
}
.dialog > header {
padding: 0.5em;
line-height: 1;
background: hsl(220, 20%, 40%);
background: linear-gradient(
hsl(var(--main-hue), 40%, 50%),
hsl(var(--main-hue), 50%, 45%));
border-bottom: 1px solid hsl(var(--main-hue), 60%, 30%);
color: white;
text-shadow: 0 2px 0 #0006;
}
.dialog > header h1 {
font-size: 1em;
font-size: 1.25em;
}
.dialog > footer {
display: flex;
@ -314,7 +322,7 @@ button.--pressed,
padding: 0.5em 1em;
}
.dialog a:link {
color: hsl(220, 50%, 50%);
color: hsl(var(--main-hue), 50%, 50%);
}
.dialog a:visited {
color: hsl(255, 50%, 50%);
@ -329,7 +337,7 @@ dl.formgrid {
dl.formgrid > dt {
grid-column: 1;
text-align: right;
color: hsl(220, 50%, 25%);
color: hsl(var(--main-hue), 50%, 25%);
}
dl.formgrid > dd {
grid-column: 2;
@ -371,7 +379,7 @@ table.level-browser thead {
background: #f4f4f4; /* match dialog background */
}
table.level-browser thead tr th {
border-bottom: 2px solid hsl(220, 20%, 60%);
border-bottom: 2px solid hsl(var(--main-hue), 20%, 60%);
}
table.level-browser tfoot {
position: sticky;
@ -379,7 +387,7 @@ table.level-browser tfoot {
background: #f4f4f4; /* match dialog background */
}
table.level-browser tfoot tr th {
border-top: 2px solid hsl(220, 20%, 60%);
border-top: 2px solid hsl(var(--main-hue), 20%, 60%);
text-align: right;
}
table.level-browser th,
@ -418,7 +426,7 @@ table.level-browser tbody tr:hover {
background: var(--generic-bg-hover-on-white);
}
table.level-browser tbody tr:nth-child(10n) td {
border-bottom: 2px solid hsl(220, 20%, 80%);
border-bottom: 2px solid hsl(var(--main-hue), 20%, 80%);
}
@media (max-width: 600px) {
/* Unique media query: this is only necessary for VERY narrow screens */
@ -483,10 +491,10 @@ table.level-browser tbody tr:nth-child(10n) td {
border: none;
}
table.level-browser thead tr {
border-bottom: 2px solid hsl(220, 20%, 60%);
border-bottom: 2px solid hsl(var(--main-hue), 20%, 60%);
}
table.level-browser tfoot tr {
border-top: 2px solid hsl(220, 20%, 60%);
border-top: 2px solid hsl(var(--main-hue), 20%, 60%);
}
table.level-browser tbody tr {
border-bottom: 1px solid #ddd;
@ -495,7 +503,7 @@ table.level-browser tbody tr:nth-child(10n) td {
border: none;
}
table.level-browser tbody tr:nth-child(10n) {
border-bottom: 2px solid hsl(220, 20%, 80%);
border-bottom: 2px solid hsl(var(--main-hue), 20%, 80%);
}
}
@ -975,7 +983,7 @@ pre.stack-trace {
position: relative;
z-index: 1;
padding: 0.25em;
border: 1px solid hsl(220, 25%, 40%);
border: 1px solid hsl(var(--main-hue), 25%, 40%);
text-shadow: 0 1px 1px black;
text-align: center;
}
@ -990,11 +998,11 @@ pre.stack-trace {
}
.played-pack-list .-progress > .-levels::before {
width: calc(var(--cleared) * 100%);
background: hsl(220, 25%, 30%);
background: hsl(var(--main-hue), 25%, 30%);
}
.played-pack-list .-progress > .-levels::after {
width: calc(var(--aidless) * 100%);
background: hsl(220, 25%, 40%);
background: hsl(var(--main-hue), 25%, 40%);
}
.played-pack-list .-progress > .-score {
grid-area: score;
@ -1134,7 +1142,7 @@ ol.packtest-summary > li {
font-weight: bold;
}
.packtest-dialog .grade-B {
color: hsl(220, 60%, 45%);
color: hsl(var(--main-hue), 60%, 45%);
font-weight: bold;
}
.packtest-dialog .grade-C {
@ -1355,7 +1363,7 @@ ol.packtest-summary > li {
row-gap: calc(var(--tile-height) * var(--scale) / 4);
padding: calc(var(--tile-height) * var(--scale) / 4) calc(var(--tile-width) * var(--scale) / 4);
background: hsl(220, 10%, 15%);
background: hsl(var(--main-hue), 10%, 15%);
box-shadow: 0 0.25em 1em black;
}
@ -1363,7 +1371,7 @@ ol.packtest-summary > li {
grid-area: level;
position: relative;
outline: 1px solid hsl(220, 10%, 5%);
outline: 1px solid hsl(var(--main-hue), 10%, 5%);
}
.level canvas {
display: block;
@ -1418,7 +1426,7 @@ body.--debug .player-overlay-message {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: hsl(220, 25%, 75%);
color: hsl(var(--main-hue), 25%, 75%);
}
.player-overlay-message > h2 {
grid-area: level;
@ -1434,7 +1442,7 @@ body.--debug .player-overlay-message {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: hsl(220, 10%, 90%);
color: hsl(var(--main-hue), 10%, 90%);
}
.player-overlay-message > .-best-score {
grid-area: score;
@ -1506,7 +1514,7 @@ body.--debug .player-overlay-message {
background: radial-gradient(#0004, hsla(330, 10%, 10%, 0.5) 40%, hsl(330, 20%, 10%));
}
.player-overlay-message[data-reason=success] {
background: radial-gradient(hsla(220, 60%, 5%, 0.75), 60%, hsla(220, 60%, 25%, 0.75));
background: radial-gradient(hsla(var(--main-hue), 60%, 5%, 0.75), 60%, hsla(var(--main-hue), 60%, 25%, 0.75));
}
.player-overlay-message[data-reason=ended] {
/* Rearrange this entirely, to fit the ending image in */
@ -1519,7 +1527,7 @@ body.--debug .player-overlay-message {
;
overflow: hidden;
background: url(ending.png) no-repeat center center / cover;
box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(220, 50%, 25%);
box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(var(--main-hue), 50%, 25%);
}
.player-overlay-message[data-reason=ended] .mobile-pause-menu {
grid-area: menu;
@ -1612,7 +1620,7 @@ body.--debug .player-overlay-message {
}
.scoreboard h4 {
font-size: 0.75em;
color: hsl(220, 10%, 60%);
color: hsl(var(--main-hue), 10%, 60%);
}
.scoreboard .-total-score h4 {
color: hsl(30, 50%, 60%);
@ -1699,7 +1707,7 @@ body.--debug .player-overlay-message {
order: 2;
font-size: 0.75em;
line-height: 1;
color: hsl(220, 20%, 80%);
color: hsl(var(--main-hue), 20%, 80%);
}
.chips output,
.time output,
@ -1710,7 +1718,7 @@ body.--debug .player-overlay-message {
line-height: 1;
text-align: right;
font-family: monospace;
color: hsl(220, 20%, 60%);
color: hsl(var(--main-hue), 20%, 60%);
}
/* nb: the hex colors are all taken from the lexy palette */
.chips output {
@ -1738,7 +1746,7 @@ body.--debug .player-overlay-message {
.chips output.--done,
.time output.--frozen,
.bonus output {
color: hsl(220, 10%, 30%);
color: hsl(var(--main-hue), 10%, 30%);
}
#player.--bonus-visible .bonus output {
color: #e2c9ff;
@ -1750,7 +1758,7 @@ body.--debug .player-overlay-message {
display: flex;
flex-direction: column;
gap: 0.5em;
color: hsl(220, 20%, 80%);
color: hsl(var(--main-hue), 20%, 80%);
}
.player-rules p {
display: none;
@ -1774,9 +1782,9 @@ body.--debug .player-overlay-message {
overflow: hidden;
font-size: calc(var(--tile-height) * var(--scale) / 4);
font-family: serif;
color: hsl(220, 20%, 80%);
background: url(#svg-icon-hint) hsl(220, 10%, 10%);
border: 3px double hsl(220, 10%, 15%);
color: hsl(var(--main-hue), 20%, 80%);
background: url(#svg-icon-hint) hsl(var(--main-hue), 10%, 10%);
border: 3px double hsl(var(--main-hue), 10%, 15%);
}
#player-game-area > .player-hint-wrapper > .player-hint-bg-icon {
position: absolute;
@ -2091,7 +2099,7 @@ body.--debug #player-debug {
padding: 0.33em 0.75em;
border: 1px solid black;
color: #d8d8d8;
background: hsl(220, 10%, 20%);
background: hsl(var(--main-hue), 10%, 20%);
box-shadow: 0 1px 2px 1px #0004;
opacity: 0.9;
@ -2383,7 +2391,7 @@ svg.level-editor-overlay text.overlay-edit-tip {
.palette-entry {
}
.palette-entry:hover {
box-shadow: 0 0 0 1px black, 0 0 0 3px hsl(220, 100%, 75%);
box-shadow: 0 0 0 1px black, 0 0 0 3px hsl(var(--main-hue), 100%, 75%);
}
.palette-entry.--selected {
z-index: 1;
@ -2549,8 +2557,8 @@ ol.editor-letter-tile-picker input[type=radio] {
display: none;
}
ol.editor-letter-tile-picker input[type=radio]:checked + .-glyph {
background: hsl(220, 75%, 90%);
outline: 2px solid hsl(220, 75%, 80%);
background: hsl(var(--main-hue), 75%, 90%);
outline: 2px solid hsl(var(--main-hue), 75%, 80%);
}
/* Hint tiles accept prose */
textarea.editor-hint-tile-text {
@ -2575,7 +2583,7 @@ textarea.editor-hint-tile-text {
stroke-width: 2;
}
.editor-tile-editor-svg-parts input:checked + svg {
stroke: hsl(220, 90%, 50%);
stroke: hsl(var(--main-hue), 90%, 50%);
}
/* Directional blocks have arrows */
ol.editor-directional-block-tile-arrows {