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

Shift the web color palette down a bit to cyan

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-05-16 17:56:07 -06:00
parent 53ed2f0948
commit 9e45710189
1 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
style.css
View File

@ -12,17 +12,17 @@ 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(225, 5%, 5%); background: hsl(210, 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(225, 10%, 15%); --panel-bg-color: hsl(210, 10%, 15%);
--button-bg-color: hsl(225, 10%, 25%); --button-bg-color: hsl(210, 10%, 25%);
--button-bg-hover-color: hsl(225, 15%, 30%); --button-bg-hover-color: hsl(210, 15%, 30%);
--generic-bg-hover-on-white: hsl(225, 60%, 90%); --generic-bg-hover-on-white: hsl(210, 60%, 90%);
--generic-bg-selected-on-white: hsl(225, 60%, 85%); --generic-bg-selected-on-white: hsl(210, 60%, 85%);
--generic-border-selected-on-white: hsl(225, 60%, 75%); --generic-border-selected-on-white: hsl(210, 60%, 75%);
} }
/* Generic element styling */ /* Generic element styling */
@ -48,10 +48,10 @@ button,
font-family: inherit; font-family: inherit;
color: white; color: white;
background: var(--button-bg-color); background: var(--button-bg-color);
border: 1px solid hsl(225, 10%, 10%); border: 1px solid hsl(210, 10%, 10%);
box-shadow: box-shadow:
inset 0 0 0 1px hsl(225, 10%, 33%), inset 0 0 0 1px hsl(210, 10%, 33%),
0 1px 1px hsl(225, 10%, 10%); 0 1px 1px hsl(210, 10%, 10%);
border-radius: 0.25em; border-radius: 0.25em;
text-transform: lowercase; text-transform: lowercase;
cursor: pointer; cursor: pointer;
@ -70,8 +70,8 @@ button:disabled {
color: #606060; color: #606060;
background: #202020; background: #202020;
box-shadow: box-shadow:
inset 0 0 2px 1px hsl(225, 0%, 10%), inset 0 0 2px 1px hsl(210, 0%, 10%),
0 1px 0 hsl(225, 10%, 10%); 0 1px 0 hsl(210, 10%, 10%);
cursor: auto; cursor: auto;
} }
button.button-big { button.button-big {
@ -81,7 +81,7 @@ button.button-big {
padding: 1em; padding: 1em;
} }
button.--button-glow-ok { button.--button-glow-ok {
background: hsl(225, 100%, 50%); background: hsl(210, 100%, 50%);
} }
button.--button-glow { button.--button-glow {
transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;
@ -144,7 +144,7 @@ a:visited {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
a:link { a:link {
color: hsl(225, 50%, 75%); color: hsl(210, 50%, 75%);
} }
a:visited { a:visited {
color: hsl(255, 50%, 75%); color: hsl(255, 50%, 75%);
@ -201,11 +201,11 @@ svg.svg-icon {
border-bottom-right-radius: 0.25em; border-bottom-right-radius: 0.25em;
} }
.radio-faux-button-set > label > input:checked + span { .radio-faux-button-set > label > input:checked + span {
background: hsl(225, 80%, 50%); background: hsl(210, 80%, 50%);
box-shadow: box-shadow:
inset 0 0 1px 1px hsl(225, 50%, 40%), inset 0 0 1px 1px hsl(210, 50%, 40%),
inset 0 -0.125em 0.5em 0.25em hsl(225, 50%, 30%), inset 0 -0.125em 0.5em 0.25em hsl(210, 50%, 30%),
0 1px 1px hsl(225, 10%, 10%); 0 1px 1px hsl(210, 10%, 10%);
} }
.button-row { .button-row {
@ -242,17 +242,19 @@ svg.svg-icon {
} }
.popup-menu { .popup-menu {
position: absolute; position: absolute;
border: 1px solid black; min-width: 10vw;
border: 1px solid #444;
color: black; color: black;
background: hsl(225, 10%, 90%); background: hsl(210, 20%, 95%);
box-shadow: 0 1px 3px 1px #0009; box-shadow: 0 1px 3px 1px #0009;
} }
.popup-menu > li { .popup-menu > li {
padding: 0.25em 0.5em; padding: 0.375em 0.625em;
cursor: pointer; cursor: pointer;
} }
.popup-menu > li:hover { .popup-menu > li:hover {
background: hsl(225, 40%, 75%); color: hsl(210, 90%, 10%);
background: hsl(210, 90%, 75%);
} }
.dialog { .dialog {
display: flex; display: flex;
@ -269,7 +271,7 @@ svg.svg-icon {
.dialog > header { .dialog > header {
padding: 0.5em; padding: 0.5em;
line-height: 1; line-height: 1;
background: hsl(225, 20%, 40%); background: hsl(210, 20%, 40%);
color: white; color: white;
} }
.dialog > header h1 { .dialog > header h1 {
@ -301,7 +303,7 @@ svg.svg-icon {
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.dialog a:link { .dialog a:link {
color: hsl(225, 50%, 50%); color: hsl(210, 50%, 50%);
} }
.dialog a:visited { .dialog a:visited {
color: hsl(255, 50%, 50%); color: hsl(255, 50%, 50%);
@ -316,7 +318,7 @@ dl.formgrid {
dl.formgrid > dt { dl.formgrid > dt {
grid-column: 1; grid-column: 1;
text-align: right; text-align: right;
color: hsl(225, 50%, 25%); color: hsl(210, 50%, 25%);
} }
dl.formgrid > dd { dl.formgrid > dd {
grid-column: 2; grid-column: 2;
@ -358,7 +360,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(225, 20%, 60%); border-bottom: 2px solid hsl(210, 20%, 60%);
} }
table.level-browser tfoot { table.level-browser tfoot {
position: sticky; position: sticky;
@ -366,7 +368,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(225, 20%, 60%); border-top: 2px solid hsl(210, 20%, 60%);
text-align: right; text-align: right;
} }
table.level-browser th, table.level-browser th,
@ -405,7 +407,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(225, 20%, 80%); border-bottom: 2px solid hsl(210, 20%, 80%);
} }
/* Compat dialog */ /* Compat dialog */
@ -810,13 +812,13 @@ pre.stack-trace {
white-space: pre-wrap; white-space: pre-wrap;
} }
.played-pack-list > li > button:enabled { .played-pack-list > li > button:enabled {
background: hsl(225, 30%, 25%); background: hsl(210, 30%, 25%);
box-shadow: box-shadow:
inset 0 0 0 1px hsl(225, 30%, 33%), inset 0 0 0 1px hsl(210, 30%, 33%),
0 1px 1px hsl(225, 10%, 10%); 0 1px 1px hsl(210, 10%, 10%);
} }
.played-pack-list > li > button:enabled:hover { .played-pack-list > li > button:enabled:hover {
background: hsl(225, 40%, 30%); background: hsl(210, 40%, 30%);
} }
.played-pack-list p { .played-pack-list p {
color: #c0c0c0; color: #c0c0c0;
@ -842,7 +844,7 @@ pre.stack-trace {
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 0.25em; padding: 0.25em;
border: 1px solid hsl(225, 25%, 40%); border: 1px solid hsl(210, 25%, 40%);
text-shadow: 0 1px 1px black; text-shadow: 0 1px 1px black;
text-align: center; text-align: center;
} }
@ -857,11 +859,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(225, 25%, 30%); background: hsl(210, 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(225, 25%, 40%); background: hsl(210, 25%, 40%);
} }
.played-pack-list .-progress > .-score { .played-pack-list .-progress > .-score {
grid-area: score; grid-area: score;
@ -1202,7 +1204,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(225, 10%, 20%); background: hsl(210, 10%, 20%);
box-shadow: 0 0.25em 1em black; box-shadow: 0 0.25em 1em black;
} }
@ -1269,8 +1271,8 @@ body.--debug .overlay-message {
box-shadow: inset 0 0 calc(4 * var(--tile-width)) var(--tile-width) black; box-shadow: inset 0 0 calc(4 * var(--tile-width)) var(--tile-width) black;
} }
#player .overlay-message[data-reason=success] { #player .overlay-message[data-reason=success] {
background: hsla(225, 50%, 25%, 0.5); background: hsla(210, 50%, 25%, 0.5);
box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(225, 50%, 25%); box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(210, 50%, 25%);
} }
#player .overlay-message[data-reason=ended] { #player .overlay-message[data-reason=ended] {
/* Shove the middle + bottom parts down so they don't overlay the busiest part of the ending image */ /* Shove the middle + bottom parts down so they don't overlay the busiest part of the ending image */
@ -1278,7 +1280,7 @@ body.--debug .overlay-message {
overflow: hidden; overflow: hidden;
x-color: black; x-color: black;
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(225, 50%, 25%); box-shadow: inset 0 0 calc(4 * var(--tile-width)) hsl(210, 50%, 25%);
x-text-shadow: 0 0 2px white, 0 2px 2px white; x-text-shadow: 0 0 2px white, 0 2px 2px white;
} }
#player .overlay-message[data-reason=ended] .-middle { #player .overlay-message[data-reason=ended] .-middle {
@ -1366,7 +1368,7 @@ dl.score-chart .-star {
order: 2; order: 2;
font-size: 1.5em; font-size: 1.5em;
line-height: 1; line-height: 1;
color: hsl(225, 20%, 80%); color: hsl(210, 20%, 80%);
} }
.chips output, .chips output,
.time output, .time output,
@ -1378,7 +1380,7 @@ dl.score-chart .-star {
line-height: 1; line-height: 1;
text-align: right; text-align: right;
font-family: monospace; font-family: monospace;
color: hsl(225, 20%, 60%); color: hsl(210, 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 {
@ -1405,7 +1407,7 @@ dl.score-chart .-star {
} }
.chips output.--done, .chips output.--done,
.time output.--frozen { .time output.--frozen {
color: hsl(225, 10%, 30%); color: hsl(210, 10%, 30%);
} }
.bonus output { .bonus output {
color: #e2c9ff; color: #e2c9ff;
@ -1421,7 +1423,7 @@ dl.score-chart .-star {
font-size: calc(var(--tile-height) * var(--scale) / 4); font-size: calc(var(--tile-height) * var(--scale) / 4);
grid-area: rules; grid-area: rules;
align-self: end; align-self: end;
color: hsl(225, 20%, 80%); color: hsl(210, 20%, 80%);
} }
.player-rules p { .player-rules p {
display: none; display: none;
@ -1445,9 +1447,9 @@ dl.score-chart .-star {
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(225, 20%, 80%); color: hsl(210, 20%, 80%);
background: url(#svg-icon-hint) hsl(225, 10%, 10%); background: url(#svg-icon-hint) hsl(210, 10%, 10%);
border: 3px double hsl(225, 10%, 20%); border: 3px double hsl(210, 10%, 20%);
} }
#player-game-area > .player-hint-wrapper > .player-hint-bg-icon { #player-game-area > .player-hint-wrapper > .player-hint-bg-icon {
position: absolute; position: absolute;
@ -1469,6 +1471,7 @@ dl.score-chart .-star {
min-width: 100%; min-width: 100%;
padding: 0.5em 0.625em; padding: 0.5em 0.625em;
line-height: 1.5; line-height: 1.5;
white-space: pre-wrap;
} }
#player-game-area > .player-hint-wrapper.--visible { #player-game-area > .player-hint-wrapper.--visible {
display: initial; display: initial;
@ -1732,7 +1735,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(225, 10%, 20%); background: hsl(210, 10%, 20%);
box-shadow: 0 1px 2px 1px #0004; box-shadow: 0 1px 2px 1px #0004;
opacity: 0.9; opacity: 0.9;
@ -1859,16 +1862,16 @@ svg.level-editor-overlay .overlay-transient.--visible {
display: initial; display: initial;
} }
svg.level-editor-overlay rect.overlay-cursor { svg.level-editor-overlay rect.overlay-cursor {
x-stroke: hsla(225, 100%, 60%, 0.5); x-stroke: hsla(210, 100%, 60%, 0.5);
fill: hsla(225, 100%, 75%, 0.25); fill: hsla(210, 100%, 75%, 0.25);
} }
svg.level-editor-overlay rect.overlay-pending-selection { svg.level-editor-overlay rect.overlay-pending-selection {
stroke: hsla(225, 100%, 60%, 0.5); stroke: hsla(210, 100%, 60%, 0.5);
fill: hsla(225, 100%, 75%, 0.25); fill: hsla(210, 100%, 75%, 0.25);
} }
svg.level-editor-overlay rect.overlay-selection { svg.level-editor-overlay rect.overlay-selection {
stroke: #000c; stroke: #000c;
fill: hsla(225, 0%, 75%, 0.25); fill: hsla(210, 0%, 75%, 0.25);
stroke-dasharray: 0.125, 0.125; stroke-dasharray: 0.125, 0.125;
animation: marching-ants 1s linear infinite; animation: marching-ants 1s linear infinite;
pointer-events: auto; pointer-events: auto;
@ -1926,7 +1929,7 @@ svg.level-editor-overlay text.overlay-edit-tip {
text-transform: none; text-transform: none;
text-align: left; text-align: left;
color: #d8d8d8; color: #d8d8d8;
background: hsl(225, 10%, 20%); background: hsl(210, 10%, 20%);
box-shadow: 0 1px 2px 1px #0004; box-shadow: 0 1px 2px 1px #0004;
} }
.editor-big-tooltip h3 { .editor-big-tooltip h3 {
@ -2024,7 +2027,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(225, 100%, 75%); box-shadow: 0 0 0 1px black, 0 0 0 3px hsl(210, 100%, 75%);
} }
.palette-entry.--selected { .palette-entry.--selected {
z-index: 1; z-index: 1;
@ -2190,8 +2193,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(225, 75%, 90%); background: hsl(210, 75%, 90%);
outline: 2px solid hsl(225, 75%, 80%); outline: 2px solid hsl(210, 75%, 80%);
} }
/* Hint tiles accept prose */ /* Hint tiles accept prose */
textarea.editor-hint-tile-text { textarea.editor-hint-tile-text {
@ -2216,7 +2219,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(225, 90%, 50%); stroke: hsl(210, 90%, 50%);
} }
/* Directional blocks have arrows */ /* Directional blocks have arrows */
ol.editor-directional-block-tile-arrows { ol.editor-directional-block-tile-arrows {