mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
541 lines
9.4 KiB
CSS
541 lines
9.4 KiB
CSS
.sheet-container {
|
|
font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
|
|
}
|
|
|
|
input[type=number].sheet-number-input-green {
|
|
border-color: #bfbf88;
|
|
border-width: 2px;
|
|
border-radius: 0;
|
|
border-style: solid;
|
|
background-color: #f5f4ec;
|
|
color: #66652E;
|
|
padding-bottom: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type=number].sheet-number-input-orange {
|
|
border-color: #f7d1a7;
|
|
border-width: 2px;
|
|
border-radius: 0;
|
|
border-style: solid;
|
|
background-color: #fdf3e9;
|
|
color: #730A18;
|
|
padding-bottom: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-container {
|
|
min-width: 787px;
|
|
}
|
|
|
|
.sheet-header {
|
|
margin: 3px;
|
|
}
|
|
|
|
.sheet-label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-attributes-header {
|
|
margin-bottom: 10px;
|
|
display: inline-grid;
|
|
width: auto;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
align-items: center;
|
|
grid-column-gap: 2px;
|
|
}
|
|
|
|
.sheet-attributes-header-input {
|
|
border-color: #EBE9DA;
|
|
border-width: 0 0 2px 0;
|
|
border-radius: 0;
|
|
border-style: solid;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.sheet-stats {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-stats-column {
|
|
display: inline-grid;
|
|
height: 180px;
|
|
width: auto;
|
|
margin-right: 1px;
|
|
align-items: center;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: repeat(6, 1fr);
|
|
grid-row-gap: 2px;
|
|
grid-column-gap: 5px;
|
|
}
|
|
|
|
.sheet-stats-wide-column {
|
|
display: inline-grid;
|
|
height: 180px;
|
|
width: auto;
|
|
align-items: center;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
grid-row-gap: 2px;
|
|
grid-column-gap: 5px;
|
|
}
|
|
|
|
.sheet-stats-short {
|
|
grid-template-rows: repeat(3, 1fr);
|
|
height: 90px;
|
|
}
|
|
|
|
.sheet-stats-green {
|
|
padding: 3px 7px 3px 3px;
|
|
background-color: #EBE9DA;
|
|
border: 2px solid #AFAF6B;
|
|
color: #66652E;
|
|
}
|
|
|
|
.sheet-stats-orange {
|
|
padding: 3px 7px 3px 3px;
|
|
background-color: #FDF1E4;
|
|
border: 2px solid #F5C691;
|
|
color: #730A18;
|
|
}
|
|
|
|
.sheet-stats-column-header {
|
|
text-align: center;
|
|
width: 100%;
|
|
grid-column: span 2
|
|
}
|
|
|
|
.sheet-derived-value {
|
|
font-weight: bold;
|
|
width: 3em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-smalltext {
|
|
width: 240px;
|
|
height: 58px;
|
|
}
|
|
|
|
.sheet-smallertext {
|
|
width: 240px;
|
|
height: 40px;
|
|
}
|
|
|
|
input[type=number].sheet-long-number {
|
|
width: 4em;
|
|
}
|
|
|
|
input[type=number].sheet-longer-number {
|
|
width: 5em;
|
|
}
|
|
|
|
select {
|
|
margin-bottom: 0px;
|
|
height: 32px;
|
|
}
|
|
|
|
.sheet-valor-button {
|
|
height: 30px;
|
|
font-weight: 550;
|
|
}
|
|
|
|
.sheet-tech-block {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.sheet-tech-conditional-field {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.sheet-unspent-ap {
|
|
width: 100%;
|
|
color: #4E1319;
|
|
display: inline-block;
|
|
text-align: right;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
.sheet-unspent-sp {
|
|
width: 100%;
|
|
color: #757437;
|
|
text-align: right;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
.sheet-unspent-tp {
|
|
width: 100%;
|
|
color: #4E1319;
|
|
text-align: right;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
.sheet-section-header {
|
|
text-align: center;
|
|
font-size: 16pt;
|
|
font-weight: bold;
|
|
letter-spacing: 4px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.sheet-roll-defense {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sheet-defense-buttons {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Flaws */
|
|
|
|
.sheet-flaws-header {
|
|
color: #730A18;
|
|
text-align: center;
|
|
font-size: 24pt;
|
|
font-weight: bold;
|
|
letter-spacing: 10px;
|
|
margin-bottom: 20px;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.sheet-flaw {
|
|
color: #730A18;
|
|
background-color: #e5d4cf;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
margin-left: 24px;
|
|
padding-left: 4px;
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-flaw-upper {
|
|
padding-left: -5px;
|
|
padding-bottom: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-flaw-picker {
|
|
border: 3px solid #730A18;
|
|
border-radius: 0;
|
|
position: relative;
|
|
color: black;
|
|
top: -8px;
|
|
left: -8px;
|
|
}
|
|
|
|
.sheet-flaw-level {
|
|
border-color: #730A18;
|
|
border-width: 2px;
|
|
border-radius: 0;
|
|
border-style: solid;
|
|
background-color: #ece0dd;
|
|
padding-bottom: 0px;
|
|
color: #730A18;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-notes {
|
|
width: 90%;
|
|
}
|
|
|
|
/* Skills */
|
|
|
|
.sheet-skills-header {
|
|
color: #757437;
|
|
text-align: center;
|
|
font-size: 24pt;
|
|
font-weight: bold;
|
|
letter-spacing: 10px;
|
|
margin-bottom: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sheet-skill {
|
|
color: #757437;
|
|
background-color: #D4D1C1;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
margin-left: 24px;
|
|
padding-left: 4px;
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-skill select {
|
|
color: black;
|
|
}
|
|
|
|
.sheet-skill-upper {
|
|
padding-left: -5px;
|
|
padding-bottom: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-skill-picker {
|
|
border: 3px solid #757437;
|
|
border-radius: 0;
|
|
position: relative;
|
|
color: black;
|
|
top: -8px;
|
|
left: -8px;
|
|
}
|
|
|
|
.sheet-skill-level {
|
|
border-color: #757437;
|
|
border-width: 2px;
|
|
border-radius: 0;
|
|
border-style: solid;
|
|
background-color: #e3e1d7;
|
|
padding-bottom: 0px;
|
|
color: #757437;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-notes {
|
|
width: 90%;
|
|
}
|
|
|
|
/* Techs */
|
|
|
|
.sheet-techs-header {
|
|
color: #730A18;
|
|
text-align: center;
|
|
font-size: 24pt;
|
|
font-weight: bold;
|
|
letter-spacing: 10px;
|
|
margin-bottom: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.sheet-tech {
|
|
color: #730A18;
|
|
background-color: #FCECD8;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 5px;
|
|
margin-left: 8px;
|
|
padding-left: 7px;
|
|
padding-top: 5px;
|
|
padding-right: 5px;
|
|
align-items: center;
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
grid-template-rows: repeat(5, auto);
|
|
grid-row-gap: 5px;
|
|
grid-column-gap: 5px;
|
|
}
|
|
|
|
.sheet-tech select {
|
|
border: 2px solid #F2AC63;
|
|
border-radius: 0;
|
|
background-color: #fdf5eb;
|
|
width: 190px;
|
|
}
|
|
|
|
.sheet-tech textarea,input[type=text] {
|
|
background-color: white;
|
|
}
|
|
|
|
select.sheet-number-select {
|
|
width: 4em;
|
|
margin-bottom: 0px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-tech-name {
|
|
position: relative;
|
|
z-index: 10;
|
|
top: 13px;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-tech-summary {
|
|
grid-row: span 4;
|
|
align-items: top;
|
|
height: 100%;
|
|
}
|
|
|
|
.sheet-tech-description {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.sheet-tech-modifiers {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.sheet-tech-optional-fields {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.sheet-spacer {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.sheet-tech-name input {
|
|
border: 3px solid #F2AC63;
|
|
border-radius: 0;
|
|
width: 230px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.sheet-tech-field {
|
|
border: 2px solid #F2AC63;
|
|
background-color: #fdf5eb;
|
|
border-radius: 0;
|
|
margin-left: 2px;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-tech-small-input {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-tech-cost {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.sheet-tech-level {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-tech-core-power {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-tech-cost {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-tech-top-table {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Conditionals */
|
|
|
|
.sheet-conditional-check {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-conditional-block {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-conditional-block-inverse {
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-conditional-check:checked ~ .sheet-conditional-block {
|
|
display: inline;
|
|
}
|
|
.sheet-conditional-check:checked ~ .sheet-conditional-block-inverse {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-outer {
|
|
font-family: "Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;
|
|
color: #730A18;
|
|
background-color: #FCECD8;
|
|
margin-left: 8px;
|
|
margin-top: 6px;
|
|
padding-left: 5px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-header {
|
|
position: relative;
|
|
border: 3px solid #F2AC63;
|
|
color: black;
|
|
left: -11px;
|
|
top: -5px;
|
|
font-weight: bold;
|
|
font-size: 11pt;
|
|
background-color: white;
|
|
padding: 3px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-roll {
|
|
line-height: 170%
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-healing-number {
|
|
font-weight: bold;
|
|
color: darkgreen;
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-damage-number {
|
|
font-weight: bold;
|
|
color: darkred;
|
|
}
|
|
|
|
.sheet-rolltemplate-valor .sheet-mods-list {
|
|
font-style: italic;
|
|
}
|
|
|
|
div.sheet-tab-content { display: none; }
|
|
|
|
/* Tabbed container */
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-tab1,
|
|
input.sheet-tab2:checked ~ div.sheet-tab2,
|
|
input.sheet-tab3:checked ~ div.sheet-tab3 { display: block; }
|
|
|
|
input.sheet-tab {
|
|
width: 150px;
|
|
height: 25px;
|
|
position: relative;
|
|
left: 6px;
|
|
top: 2px;
|
|
margin: -1.5px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
input.sheet-tab + span::before {
|
|
content: attr(title);
|
|
border-color: #bababa #bababa #bababa #bababa;
|
|
border-width: 2px 2px 0 2px;
|
|
border-radius: 5px 5px 0 0;
|
|
border-style: none;
|
|
margin: 2px 0 0 2px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
background: transparent;
|
|
width: 150px;
|
|
height: 23px;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
top: 72px;
|
|
left: 30px;
|
|
}
|
|
|
|
input.sheet-tab:checked + span::before {
|
|
background: #e8e8e8;
|
|
border-style: solid;
|
|
margin: 0;
|
|
}
|
|
|
|
input.sheet-tab2 + span::before { left: 181px; }
|
|
|
|
input.sheet-tab3 + span::before { left: 331px; }
|
|
div.sheet-tab-content {
|
|
border: 2px solid #bababa;
|
|
margin: 2px 0 0 0;
|
|
padding: 5px;
|
|
} |