mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 20:22:29 +00:00
cer0m
d67191d3da
Character-sheet for Michael Giesendorf's: Thorg. Game rules are written and availabel only in German. That is why the character sheet is only available in German, too. Rule books and background information can be found here: http://thorg.eu/support/download.htm. There will be Updates regarding new functions coming in the future.
594 lines
12 KiB
CSS
594 lines
12 KiB
CSS
.sheet-container {
|
|
position:relative;
|
|
background-color: white;
|
|
color: black;
|
|
display: grid;
|
|
grid-template-columns: repeat(1, auto);
|
|
grid-template-rows: repeat(1, auto);
|
|
justify-items: stretch;
|
|
border: 4px double black2;
|
|
border-radius:15px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-header {
|
|
padding-bottom: 10px;
|
|
border-bottom: 4px double black;
|
|
}
|
|
|
|
.sheet-tabs {
|
|
margin-top: 10px;
|
|
position: relative;
|
|
}
|
|
.sheet-tabs::after {
|
|
clear: both;
|
|
content: '';
|
|
display: block; }
|
|
.sheet-tabs .sheet-tab {
|
|
}
|
|
.sheet-tabs .sheet-tab:nth-of-type(2) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(2) > .sheet-tab-label {
|
|
margin-left: 15%; }
|
|
.sheet-tabs .sheet-tab:nth-of-type(3) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(3) > .sheet-tab-label {
|
|
margin-left: 30%; }
|
|
.sheet-tabs .sheet-tab:nth-of-type(4) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(4) > .sheet-tab-label {
|
|
margin-left: 45%; }
|
|
.sheet-tabs .sheet-tab:nth-of-type(5) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(5) > .sheet-tab-label {
|
|
margin-left: 60%; }
|
|
.sheet-tabs .sheet-tab:nth-of-type(6) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(6) > .sheet-tab-label {
|
|
margin-left: 75%; }
|
|
.sheet-tabs .sheet-tab:nth-of-type(7) > input[type="radio"], .sheet-tabs .sheet-tab:nth-of-type(7) > .sheet-tab-label {
|
|
margin-left: 90%; }
|
|
.sheet-tabs .sheet-tab > input[type="radio"] {
|
|
height: 30px;
|
|
margin: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 15%;
|
|
z-index: 1; }
|
|
|
|
.sheet-tabs .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label {
|
|
background: lightgrey;
|
|
color: black;
|
|
border-bottom-color: black;
|
|
}
|
|
|
|
.sheet-tabs .sheet-tab > .sheet-tab-label {
|
|
align-items: center;
|
|
background: #white;
|
|
border-radius: 6px 6px 0 0;
|
|
border: 2px solid black;
|
|
color: black;
|
|
display: flex;
|
|
font-size: 11px;
|
|
/**font-variant: small-caps;**/
|
|
font-weight: bold;
|
|
height: 30px;
|
|
justify-content: center;
|
|
margin: 0;
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
top: 0;
|
|
width: 15%;
|
|
border-left-color: black;
|
|
border-top-color: black;
|
|
border-right-color: black;
|
|
border-bottom-color: black;
|
|
}
|
|
|
|
.sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label {
|
|
background: gray;
|
|
border-color: black;
|
|
border-bottom-color: black;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-tabs .sheet-tab > input[type="radio"]:checked {
|
|
cursor: auto; }
|
|
.sheet-tabs .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-tabs .sheet-tab .sheet-tab-content {
|
|
display: none;
|
|
min-height: 300px;
|
|
padding-top: 32px;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sheet-content {
|
|
background: grey;
|
|
padding: 5px;
|
|
border: 2px solid black;
|
|
border-radius: 0 10px 10px 10px;
|
|
min-height:300px;
|
|
}
|
|
|
|
.sheet-label {
|
|
color: black;
|
|
font-weight:bold;
|
|
font-size: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.sheet-input {
|
|
float: left;
|
|
width: 90%;
|
|
}
|
|
|
|
.sheet-heading {
|
|
font-size: 1.5em;
|
|
font-weight:bold;
|
|
border:0px;
|
|
border-radius:0px;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.sheet-smallblock {
|
|
margin: 5px;
|
|
float: left;
|
|
}
|
|
.sheet-block {
|
|
background: white;
|
|
border-radius:15px;
|
|
border: 1px solid black;
|
|
padding: 5px;
|
|
color: black;
|
|
min-height: 30px;
|
|
text-align: center;
|
|
}
|
|
/**
|
|
.sheet-block input {
|
|
font-size: 12px;
|
|
line-height:15px;
|
|
height: 15px;
|
|
color:black;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.sheet-block select {
|
|
font-size: 12px;
|
|
line-height:15px;
|
|
height: 15px;
|
|
color: black;
|
|
margin-bottom:5px;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-block option:disabled {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-block input[type="checkbox"]:checked {
|
|
background-color: #EC2127;
|
|
}
|
|
|
|
.sheet-block input[type="checkbox"] {
|
|
margin: 5px -1px;
|
|
border-radius: 100%;
|
|
border: 2px solid #000 !important;
|
|
width: 2em;
|
|
height: 2em;
|
|
background-color: white;
|
|
vertical-align: middle;
|
|
-webkit-appearance: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
table.sheet-xp {
|
|
width: 250px;
|
|
}
|
|
table.sheet-xp th{
|
|
text-align: center;
|
|
font-weight:bold;
|
|
border:1px solid white;
|
|
border-radius:15px;
|
|
}
|
|
table.sheet-xp td{
|
|
text-align: center;
|
|
border:1px solid white;
|
|
border-radius:15px;
|
|
padding:5px;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-attrname {
|
|
font-weight:bold;
|
|
font-size: 16px;
|
|
width:145px;
|
|
background:transparent;
|
|
border:0px;
|
|
color:White;
|
|
}
|
|
|
|
.sheet-skillblock {
|
|
margin-left:20px;
|
|
}
|
|
**/
|
|
.sheet-top {
|
|
border-bottom: 2px double black;
|
|
display: inline-block;
|
|
width:100%;
|
|
color:black;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
/**
|
|
.sheet-blocklabel {
|
|
float: left;
|
|
font-weight:bold;
|
|
background:transparent;
|
|
border:0px;
|
|
color:White;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}**/
|
|
|
|
.sheet-heading {
|
|
font-size: 1.5em;
|
|
font-weight:bold;
|
|
border:0px;
|
|
border-radius:0px;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.sheet-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, auto);
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.sheet-lpaume-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(8, auto);
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.sheet-kpinfruf-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 20%);
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.sheet-geld-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 12%);
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-exp-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 25%);
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 20px;
|
|
}
|
|
|
|
.sheet-abenteuer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 20px;
|
|
}
|
|
|
|
.sheet-attr-boni-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 12%);
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-attribute-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px 25px auto auto auto auto auto 40px;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;2
|
|
}
|
|
|
|
.sheet-berechnung-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px auto auto auto auto auto auto;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-2-grid{
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: auto;
|
|
justify-items: center;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-talente-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px 40px 25px auto auto auto auto 40px 40px;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-kampftalente-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px 40px auto auto auto auto 40px;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-fernkampftalente-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px 40px 25px auto auto auto auto 40px;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-zauber-grid{
|
|
display: grid;
|
|
grid-template-columns: 25px 2fr 1fr 1fr 2fr 1fr;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-faehigkeiten-grid{
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 4fr;
|
|
grid-template-rows: 40px auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_skills"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 25px 40px 25px auto auto auto auto 40px 40px;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_berufe"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 25px 40px 25px auto auto auto auto 40px 40px;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_wspezs"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 25px 40px auto auto auto auto 40px;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_zauber"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 25px auto auto auto auto auto;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_faehigkeiten"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 4fr;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_abenteuer"] > .repitem {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
grid-template-rows: auto;
|
|
justify-items: start;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic div.sheet-template-container {
|
|
background: gray;
|
|
color: black;
|
|
border: 2px solid black !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .sheet-template-header {
|
|
background: lightgrey;
|
|
color: black;
|
|
padding: 2px;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .sheet-template-row {
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
background: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid black;
|
|
border-radius: 5px;
|
|
background: lightgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .inlinerollresult.fullcrit {
|
|
border: 2px solid green;
|
|
color: green;
|
|
background: #98fb98;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .inlinerollresult.fullfail {
|
|
border: 2px solid red;
|
|
color: red;
|
|
background: #ffe4e1;
|
|
}
|
|
|
|
.sheet-rolltemplate-basic .inlinerollresult.importantroll {
|
|
border: 2px solid blue;
|
|
color: blue;
|
|
background: #e0ffff;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung div.sheet-template-container {
|
|
background: gray;
|
|
color: black;
|
|
border: 2px solid black !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .sheet-template-header {
|
|
background: lightgrey;
|
|
color: black;
|
|
padding: 2px;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .sheet-template-row {
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
background: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid black;
|
|
border-radius: 5px;
|
|
background: lightgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .inlinerollresult.fullfail {
|
|
border: 2px solid red;
|
|
color: red;
|
|
background: #ffe4e1;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .inlinerollresult.fullcrit {
|
|
border: 2px solid green;
|
|
color: green;
|
|
background: #98fb98;
|
|
}
|
|
|
|
.sheet-rolltemplate-steigerung .inlinerollresult.importantroll {
|
|
border: 2px solid blue;
|
|
color: blue;
|
|
background: #e0ffff;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber div.sheet-template-container {
|
|
background: gray;
|
|
color: black;
|
|
border: 2px solid black !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .sheet-template-header {
|
|
background: lightgrey;
|
|
color: black;
|
|
padding: 2px;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .sheet-template-row {
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
background: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid black;
|
|
border-radius: 5px;
|
|
background: lightgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .inlinerollresult.fullfail {
|
|
border: 2px solid red;
|
|
color: red;
|
|
background: #ffe4e1;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .inlinerollresult.fullcrit {
|
|
border: 2px solid green;
|
|
color: green;
|
|
background: #98fb98;
|
|
}
|
|
|
|
.sheet-rolltemplate-zauber .inlinerollresult.importantroll {
|
|
border: 2px solid blue;
|
|
color: blue;
|
|
background: #e0ffff;
|
|
}
|
|
|
|
|
|
.sheet-rollbutton {
|
|
background: #green;
|
|
color: black;
|
|
border: 0;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sheet-derstat {
|
|
width: 35px;
|
|
background: transparent;
|
|
color: white;
|
|
border: 0;
|
|
text-align: center;
|
|
} |