diff --git a/Liminal/liminal.css b/Liminal/liminal.css index 5e855ba6e5..9d29558a8d 100644 --- a/Liminal/liminal.css +++ b/Liminal/liminal.css @@ -1,27 +1,65 @@ /* Set the min-width so that when the window is resized the look will stay consistant */ .charsheet { - background-color: #8bb; - min-width: 825px; + /*background-color: #8bb;*/ + background-color:#9EBFBB; + background-size: cover; + width:825px; + min-width:825px; + min-height:400px; + margin:0; /*background-image: url('https://d1vzi28wh99zvq.cloudfront.net/images/4329/267203.jpg');*/ } /* Universal styling applied to all elements of these types */ -h1 { +.charsheet h1 { font-size: 4em; margin-bottom: 10px; + margin-top:-15px; text-align: center; } -h2 { +.charsheet h2 { font-size: 2em; margin-bottom: 10px; text-align: center; + width:100%; + /*background:#195154;*/ + background: #277F84; + color:white; + font-family: mason-serif, sans-serif; +} +.charsheet h3 { + margin-bottom: 10px; + text-align: center; +} + +.charsheet input, .charsheet textarea, .charsheet select { + background-color:#DAE7E5; +} + +/* LAYOUT */ + +.sheet-character { + display: grid; + grid-template-columns: 133px 133px 133px 133px 133px 133px; + grid-template-rows: auto; + gap: 5px; + grid-template-areas: + "basic basic basic drive drive drive" + "physical physical mental mental social social" + "explain explain explain explain explain explain" + "unspent unspent cap cap totalskill totalskill" + "traits traits traits other other other" } /* BASIC INFO */ +.sheet-basicinfo { + grid-area: basic; +} + .sheet-basicinfo label { display: inline-block; width: 80px; @@ -37,22 +75,38 @@ h2 { width: 300px; } -.sheet-basicinfo textarea { +.sheet-drive { + grid-area: drive; +} + +.sheet-drive textarea { display: inline-block; width: 290px; height:110px; } -.sheet-basicinfo label.sheet-drive { +.sheet-drive label { + display: inline-block; + width: 80px; vertical-align:top; } /* SKILLS */ +.sheet-physical { + grid-area: physical; +} +.sheet-mental { + grid-area: mental; +} +.sheet-social { + grid-area: social; +} + .sheet-skills label { margin-left:153px; margin-bottom:0; - margin-top:-15px; - font-weight: normal; + margin-top:-5px; + font-weight: bold; font-size:1em; } .sheet-skills input { @@ -60,17 +114,9 @@ h2 { width: 115px; } -p.sheet-skill-explain { - margin-top:10px; -} - -.ui-dialog .charsheet .sheet-skills .sheet-col { - margin-right:10px; - width: calc(33% - 9px); -} .charsheet .sheet-skills button[type=roll].sheet-skill-button { - width:94px; + width:100px; margin:0; height:22px; text-align:left; @@ -79,6 +125,26 @@ p.sheet-skill-explain { content: ''; } + + +p.sheet-skill-explain { + grid-area:explain; + margin-top:10px; +} + +.sheet-unspent { + grid-area: unspent; + margin-bottom:10px; +} +.sheet-cap { + grid-area: cap; + margin-bottom:10px; +} +.sheet-totalskill { + grid-area: totalskill; + margin-bottom:10px; +} + .sheet-skillpoints label { display: inline-block; width: 150px; @@ -96,35 +162,67 @@ textarea { resize: vertical; } +/* TRAITS */ +.sheet-traits { + grid-area:traits; +} + +.sheet-traits input { + display: inline-block; + width: 340px; + font-weight:bold; +} +.sheet-traits textarea { + height:100px; + width:379px; +} + +.sheet-attributes button[type=roll].sheet-2d6-dice::before { + font-family: 'dicefontd6'; + content: 'ff '; +} + +.sheet-attributes button[type=roll].sheet-d6-dice::before { + font-family: 'dicefontd6'; + content: 'f '; +} + + +.sheet-other { + grid-area: other; + display: flex; + flex-direction: column; +} /* STATS */ -.sheet-stats h4 { +.sheet-attributes h4 { display: inline-block; text-align: left; } -.sheet-stats h4.sheet-first { +.sheet-attributes h4.sheet-first { margin-left: 120px; margin-right: 15px; } -.sheet-stats input { - /*margin-right: 8%; - width: 17%;*/ +.sheet-attributes input { display: inline-block; } -.sheet-stats label { +.sheet-attributes label { display: inline-block; width: 110px; } -.sheet-stats label.sheet-driveused { +.sheet-attributes label.sheet-driveused { display: inline-block; width: 190px; } /* COMBAT */ +.sheet-combat { + margin-top:20px; +} .sheet-combat label { display: inline-block; @@ -141,37 +239,38 @@ textarea { width: 170px; } -.sheet-combat label.sheet-unarmed { - width: 297px; - font-weight:normal; -} - .sheet-combat select { display: inline-block; width: 80px; } -/* TRAITS */ - -.sheet-traits input { - display: inline-block; - width: 340px; -} -.sheet-traits textarea { - height:60px; - width:379px; -} - -.sheet-stats button[type=roll].sheet-2d6-dice::before { +.sheet-combat button[type=roll].sheet-2d6-dice::before { font-family: 'dicefontd6'; content: 'ff '; } -.sheet-stats button[type=roll].sheet-d6-dice::before { +.sheet-combat button[type=roll].sheet-d6-dice::before { font-family: 'dicefontd6'; content: 'f '; } +/* ADVANCEMENT */ +.sheet-advancement { + margin-top:20px; +} + +.sheet-advancement input { + display: inline-block; +} + +.sheet-advancement label { + display: inline-block; + width: 180px; +} + + +/* TABS */ + /*Configure the tab buttons*/ .charsheet .sheet-character, .charsheet .sheet-crew , @@ -183,7 +282,7 @@ textarea { .charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, .charsheet .sheet-tabstoggle[value="crew"] ~ div.sheet-crew , .charsheet .sheet-tabstoggle[value="mods"] ~ div.sheet-mods { - display: block; + display: grid; } /* CREW AREA */ diff --git a/Liminal/liminal.html b/Liminal/liminal.html index e9c7958819..5e68f30371 100644 --- a/Liminal/liminal.html +++ b/Liminal/liminal.html @@ -9,195 +9,197 @@
Start with 17 Skill points. If you have a skill at 3 or higher you may spend 1 point for a Speciality.
-Start with 5 Trait points. You can gain up to +2 points from Limitations.
+Spend 1 advancement to buy a trait point, increase your skill cap, or buy a crew asset.
- - - -Spend 1 advancement to buy a trait point, increase your skill cap, or buy a crew asset.
+Start with 5 Trait points. You can gain up to +2 points from Limitations.
-