Files
roll20-character-sheets/Liminal/liminal.css
T

413 lines
7.1 KiB
CSS

/* Set the min-width so that when the window is resized the look will stay consistant */
.charsheet {
background-color:#9EBFBB;
background-size: cover;
width:825px;
min-width:825px;
min-height:400px;
margin:0;
}
/* Universal styling applied to all elements of these types */
.charsheet h1 {
font-size: 4em;
margin-bottom: 10px;
margin-top:-15px;
text-align: center;
}
.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"
}
.charsheet .sheet-character label {
color:#333;
}
/* BASIC INFO */
.sheet-basicinfo {
grid-area: basic;
}
.sheet-basicinfo label {
display: inline-block;
width: 80px;
}
.sheet-basicinfo input {
display: inline-block;
width: 300px;
}
.sheet-basicinfo select {
display: inline-block;
width: 300px;
}
.sheet-drive {
grid-area: drive;
}
.sheet-drive textarea {
display: inline-block;
width: 290px;
height:110px;
}
.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:-5px;
font-weight: bold;
font-size:1em;
max-width: 105px;
}
.sheet-skills input {
display: inline-block;
width: 115px;
}
.charsheet .sheet-skills button[type=roll].sheet-skill-button {
width:100px;
margin:0;
height:22px;
text-align:left;
}
.sheet-skills button[type=roll].sheet-skill-button::before {
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;
}
.sheet-skillpoints input {
display: inline-block;
}
img {
max-height: 100px;
}
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-attributes h4 {
display: inline-block;
text-align: left;
}
.sheet-attributes h4.sheet-first {
margin-left: 120px;
margin-right: 15px;
}
.sheet-attributes input {
display: inline-block;
}
.sheet-attributes label {
display: inline-block;
width: 110px;
}
.sheet-attributes label.sheet-driveused {
display: inline-block;
width: 190px;
}
/* COMBAT */
.sheet-combat {
margin-top:20px;
}
.sheet-combat label {
display: inline-block;
width: 200px;
}
.sheet-combat label.sheet-damagebonus {
display: inline-block;
width: 200px;
}
.sheet-combat input {
display: inline-block;
width: 170px;
}
.sheet-combat select {
display: inline-block;
width: 80px;
}
.sheet-combat button[type=roll].sheet-2d6-dice::before {
font-family: 'dicefontd6';
content: 'ff ';
}
.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 ,
.charsheet .sheet-mods {
display: none;
}
/* show the selected tab */
.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: grid;
}
/* CREW AREA */
.sheet-crew textarea {
height:110px;
width:720px;
}
.charsheet .sheet-crew label {
color:#333;
}
.sheet-crew-relationships h3 {
padding-right:14px;
}
.charsheet .repcontainer[data-groupname="repeating_assets"] > .repitem {
display: inline-block;
margin-right:10px;
}
.charsheet .repcontainer[data-groupname="repeating_assets"] > .repitem input{
width:360px;
}
.charsheet .repcontainer[data-groupname="repeating_assets"] > .repitem textarea{
width:350px;
display:block;
}
.sheet-crew-relationships h3.sheet-factionname, .sheet-crew-relationships h3.sheet-factionmodifiers, .sheet-crew-relationships textarea {
display:inline-block;
width:40%;
}
.sheet-crew-relationships h3.sheet-factiontotal {
display:inline-block;
}
.sheet-crew-relationships input {
display:inline-block;
vertical-align:top !important;
}
.sheet-crew-relationships textarea {
height:60px;
}
.charsheet .sheet-mods label {
color:#333;
}
/* ROLL TEMPLATE */
.sheet-rolltemplate-liminal {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-liminal {
margin-left: -7px;
}
.sheet-rolltemplate-liminal .sheet-container {
border: 1px solid;
border-color: #277F84;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-liminal .sheet-header {
background-color: #277F84;
text-align: left;
color: white;
padding: 5px;
}
.sheet-rolltemplate-liminal .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-liminal .sheet-subtitle {
font-size:.9em;
}
/* Allprops part */
.sheet-rolltemplate-liminal .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-liminal .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-liminal .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-liminal .sheet-value {
}
*/
/* Make even-numbered rows grey */
.sheet-rolltemplate-liminal .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-liminal .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-liminal .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/* set the inline roll result so it doesn't look awful in dark mode */
.sheet-rolltemplate-liminal .sheet-container .inlinerollresult {
background-color:#DAE7E5;
border: 1px solid #333;
color:#black;
}