-
Notifications
You must be signed in to change notification settings - Fork 1
/
character-sheet.css
33 lines (32 loc) · 1.87 KB
/
character-sheet.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body { font-family: Helvetica, Arial, sans-serif; }
.header { background-color: #FFF; padding: 1px 0 0 0; margin-bottom: 1rem; }
.innerheader { max-width: 90%; margin: 0 auto; text-align: center; }
.title { margin: 0; padding-top: 3rem; font-style: italic; color: #CC2027; }
.subtitle { padding: 2rem 0; }
.gallery { max-width: 80%; margin: 0 auto; }
.layouts { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.layouts:after { content: ""; flex: auto; } /* align last columns to grid */
.layout { flex-shrink: 0; flex-basis: 24%; }
.layout-name { display: block; text-align: center; font-family: "courier new", courier, monospace; color: #CC2027; font-weight: bold; font-size: 1.5rem; text-shadow: 3px 3px 2px #ccc; text-decoration: none; }
@media (max-width: 1000px) { .layout { flex-basis: 32%; } }
@media (max-width: 800px) { .layout { flex-basis: 48%; } }
@media (max-width: 450px) { .layout { flex-basis: 100%; } }
.characters { list-style: none; padding: 0; margin: 0; }
.character { margin: 5%; }
.background { max-width: 100%; }
.avatar { width: 100%; box-shadow: 0 0 2px -1px #000; border-radius: 5px; }
.buttons { position: absolute; top: 0; right: 0; }
.button--save-to-server { position: absolute; top: 10px; right: 170px; }
/*.button--load-from-server { position: absolute; top: 10px; left: 90px; }*/
.button--download-json { position: absolute; top: 10px; right: 10px; }
.button--upload-json { position: absolute; top: 10px; right: 90px; }
.read-only-banner { position: absolute; top: -30px; left: -40px; }
/* Inputs styling in order to get the same look cross-browsers & cross-OSs (e.g. for the same FF version, Windows & Ubuntu input default borders differ) */
input[type=text], input[type=number], textarea {
font-family: Tahoma,Geneva,sans-serif;
padding: 2px;
border: 1px solid lightgrey;
}
input, textarea {
position: absolute;
}