manuel/labyrinth-frontend
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Color tweaking.

Browse source
This commit is contained in:
Manuel Friedli 2024-12-26 17:49:26 +01:00
parent 7d4f1151fa
commit d8d05589e7
Signed by: manuel
GPG key ID: 41D08ABA75634DA1
3 changed files with 21 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/cell.css
View file

@ -2,6 +2,10 @@
background-color: var(--color-maze-cell-solution); background-color: var(--color-maze-cell-solution);
} }
.solution:hover {
background-color: var(--color-maze-cell-solution-highlight);
}
.top { .top {
border-top-color: var(--color-maze-border); border-top-color: var(--color-maze-border);
} }
@ -19,9 +23,13 @@
} }
.user{ .user{
background-color: hotpink; background-color: var(--color-maze-cell-user);
}
.user:hover {
background-color: var(--color-maze-cell-user-highlight);
} }
.solution.user { .solution.user {
background-color: darkred; background-color: #c8ff00;
} }

4
src/app/cell.module.css
View file

@ -5,3 +5,7 @@
width: 2em; width: 2em;
padding: 0; padding: 0;
} }
.cell:hover {
background-color: var(--color-background-highlight);
}

174
src/app/globals.css
View file

@ -10,6 +10,9 @@
--color-maze-background: #e8e6e3; --color-maze-background: #e8e6e3;
--color-maze-border: #333333; --color-maze-border: #333333;
--color-maze-cell-solution: #b1d5b1; --color-maze-cell-solution: #b1d5b1;
--color-maze-cell-solution-highlight: #b9e8b9;
--color-maze-cell-user: #ffcc00;
--color-maze-cell-user-highlight: #ffdd22;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -24,6 +27,9 @@
--color-maze-background: #181a1b; --color-maze-background: #181a1b;
--color-maze-border: #e8e6e3; --color-maze-border: #e8e6e3;
--color-maze-cell-solution: #213d21; --color-maze-cell-solution: #213d21;
--color-maze-cell-solution-highlight: #3d6e3d;
--color-maze-cell-user: #ffcc00;
--color-maze-cell-user-highlight: #ffdd22;
} }
} }
@ -46,171 +52,3 @@ input:hover, input:focus, select:hover, select:focus {
border-color: var(--color-border-highlight); border-color: var(--color-border-highlight);
color: var(--color-foreground-highlight); color: var(--color-foreground-highlight);
} }
/*div.cell {*/
/* display: table-cell;*/
/* border: 1px solid transparent;*/
/* height: 2em;*/
/* width: 2em;*/
/* padding: 0;*/
/*}*/
/*div.cell.solution {*/
/* background-color: lightgray;*/
/*}*/
/*div.cell.top {*/
/* border-top-color: var(--color-maze-border);*/
/*}*/
/*div.cell.right {*/
/* border-right-color: var(--color-maze-border);*/
/*}*/
/*div.cell.bottom {*/
/* border-bottom-color: var(--color-maze-border);*/
/*}*/
/*div.cell.left {*/
/* border-left-color: var(--color-maze-border);*/
/*}*/
/*div.cell.user {*/
/* background-color: hotpink;*/
/*}*/
/*div.cell.user2 {*/
/* border-radius: 0.5em;*/
/*}*/
/*div.cell.solution.user {*/
/* background-color: darkred;*/
/*}*/
input:invalid {
border-color: #f00;
}
body {
margin: 20px;
padding: 0;
}
h1 {
margin-top: 0;
font-size: 22px;
}
h2 {
margin-top: 0;
font-size: 20px;
}
h3 {
margin-top: 0;
font-size: 18px;
}
h4 {
margin-top: 0;
font-size: 16px;
}
h5 {
margin-top: 0;
font-size: 14px;
}
h6 {
margin-top: 0;
font-size: 12px;
}
code {
font-size: 1.2em;
}
ul {
padding-left: 20px;
}
* {
box-sizing: border-box;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.board-row:after {
clear: both;
content: '';
display: table;
}
.status {
margin-bottom: 10px;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
/*:root {*/
/* --background: #ffffff;*/
/* --foreground: #171717;*/
/*}*/
/*@media (prefers-color-scheme: dark) {*/
/* :root {*/
/* --background: #0a0a0a;*/
/* --foreground: #ededed;*/
/* }*/
/*}*/
/*html,*/
/*body {*/
/* max-width: 100vw;*/
/* overflow-x: hidden;*/
/*}*/
/*body {*/
/* color: var(--foreground);*/
/* background: var(--background);*/
/* font-family: Arial, Helvetica, sans-serif;*/
/* -webkit-font-smoothing: antialiased;*/
/* -moz-osx-font-smoothing: grayscale;*/
/*}*/
/** {*/
/* box-sizing: border-box;*/
/* padding: 0;*/
/* margin: 0;*/
/*}*/
/*a {*/
/* color: inherit;*/
/* text-decoration: none;*/
/*}*/
/*@media (prefers-color-scheme: dark) {*/
/* html {*/
/* color-scheme: dark;*/
/* }*/
/*}*/