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