para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

cleanup styles a bit

Browse source
This commit is contained in:
Zutatensuppe 2021-05-13 16:22:15 +02:00
parent 722be39ad9
commit 4d8012dc33
1 changed files with 92 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

155
public/style.css
View file

@ -1,3 +1,5 @@
/* TODO: clean up / split ingame vs pregame */
:root { :root {
--main-color: #c1b19f; --main-color: #c1b19f;
--link-color: #808db0; --link-color: #808db0;
@ -22,13 +24,62 @@ h1, h2, h3, h4 {
font-size: 20px; font-size: 20px;
} }
a { color: var(--link-color); text-decoration: none; } a {
a:hover { color: var(--link-hover-color); } color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
}
td, th { td, th {
vertical-align: top; vertical-align: top;
} }
.btn {
display: inline-block;
background: var(--input-bg-color);
color: var(--link-color);
border: solid 1px black;
padding: 5px 10px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(150,150,150,.4) inset;
border-radius: 4px;
user-select: none;
}
.btn:hover {
background: #2f2e2c;
color: var(--link-hover-color);
border: solid 1px #111;
box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
cursor: pointer;
}
.btn:disabled {
background: #2f2e2c;
color: #8c4747 !important;
border: solid 1px #111;
box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
cursor: not-allowed;
}
input {
background: #333230;
border-radius: 4px;
color: var(--main-color);
padding: 6px 10px;
border: solid 1px black;
box-shadow: 0 0 3px rgba(0, 0,0,0.3) inset;
}
input:focus {
border: solid 1px #686767;
background: var(--input-bg-color);
}
/* ingame */
.scores { .scores {
position: absolute; position: absolute;
right: 0; right: 0;
@ -142,47 +193,51 @@ canvas.loaded {
cursor: none; cursor: none;
} }
input { kbd {
background: #333230; background-color: #eee;
border-radius: 4px; border-radius: 3px;
color: var(--main-color); border: 1px solid #b4b4b4;
padding: 6px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
border: solid 1px black; color: #333;
box-shadow: 0 0 3px rgba(0, 0,0,0.3) inset;
}
input:focus {
border: solid 1px #686767;
background: var(--input-bg-color);
}
.btn {
display: inline-block; display: inline-block;
background: var(--input-bg-color); font-size: .85em;
color: var(--link-color); font-weight: 700;
border: solid 1px black; line-height: 1;
padding: 5px 10px; padding: 2px 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5), 0 0 1px rgba(150,150,150,.4) inset; white-space: nowrap;
border-radius: 4px;
user-select: none;
} }
.btn:hover { /* pre-game stuff */
background: #2f2e2c;
color: var(--link-hover-color); .nav {
border: solid 1px #111; list-style: none;
box-shadow: 0 0 1px rgba(150,150,150,.4) inset; padding: 0;
}
.nav li {
display: inline-block;
margin-right: 1em;
}
.image-list {
overflow: scroll;
}
.image-list-inner {
white-space: nowrap;
}
.imageteaser {
width: 150px;
height: 100px;
display: inline-block;
margin: 5px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #222;
cursor: pointer; cursor: pointer;
} }
.btn:disabled {
background: #2f2e2c;
color: #8c4747 !important;
border: solid 1px #111;
box-shadow: 0 0 1px rgba(150,150,150,.4) inset;
cursor: not-allowed;
}
.game-teaser-wrap { .game-teaser-wrap {
display: inline-block; display: inline-block;
width: 20%; width: 20%;
@ -223,29 +278,3 @@ input:focus {
top: 0; top: 0;
right: 0; right: 0;
} }
.imageteaser {
width: 150px;
height: 100px;
display: inline-block;
margin: 5px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #222;
}
kbd {
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
color: #333;
display: inline-block;
font-size: .85em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
}