442 lines
11 KiB
CSS
442 lines
11 KiB
CSS
/*
|
|
EDITED by Gorthian
|
|
INSPIRED by Hitdice (https://www.youtube.com/c/Hitdice)
|
|
Version 1.3
|
|
Letzte Änderung 2022-01-16
|
|
|
|
GitHub https://github.com/Gorthian/FSG_CharacterSheet_Roll20
|
|
Wiki https://github.com/Gorthian/FSG_CharacterSheet_Roll20/wiki
|
|
*/
|
|
|
|
/************************************/
|
|
/* Normaler Kontrast */
|
|
/************************************/
|
|
.sheet-wrapper {
|
|
--sheet-bg : #645A51;
|
|
--sheet-text-color : #000000;
|
|
--container-bg : #645A51;
|
|
--title-bg : #D4B938;
|
|
--title-border : none;
|
|
--box-bg : #C2AF80;
|
|
--box-border : 1px solid #B5A883;
|
|
--input-border : 1px solid #000000;
|
|
--button-text-color : #000000;
|
|
}
|
|
|
|
/************************************/
|
|
/* Hoher Kontrast */
|
|
/************************************/
|
|
input.sheet-toggle-contrast:checked ~ .sheet-wrapper {
|
|
--sheet-bg : #FFFFFF;
|
|
--sheet-text-color : #FFFFFF;
|
|
--container-bg : #FFFFFF;
|
|
--title-bg : #000000;
|
|
--title-border : 1px solid #FFFFFF;
|
|
--box-bg : #000000;
|
|
--box-border : 1px solid #FFFFFF;
|
|
--input-border : 1px solid #FFFFFF;
|
|
--button-text-color : #000000;
|
|
}
|
|
|
|
/************************************/
|
|
/* GRID-Layout */
|
|
/************************************/
|
|
|
|
.sheet-fsg {
|
|
background-color : var(--sheet-bg);
|
|
color : var(--sheet-text-color);
|
|
display : grid;
|
|
grid-template-columns : auto 150px;
|
|
grid-template-areas : "status-effects sidebar"
|
|
"sheet-content sidebar"
|
|
"inventory inventory"
|
|
"who who"
|
|
"high-contrast high-contrast"
|
|
"footer footer";
|
|
}
|
|
|
|
div.sheet-status-effects {
|
|
display : grid;
|
|
grid-area : status-effects;
|
|
gap : 5px;
|
|
grid-template-columns : auto auto auto auto auto auto;
|
|
grid-template-areas : "stress exhaustion pain hunger misc advantage";
|
|
}
|
|
|
|
div.sheet-general {
|
|
display : grid;
|
|
grid-template-columns : 33.3% 33.3% 33.3%;
|
|
grid-template-areas : "name eat drink"
|
|
"home languages reserves"
|
|
"attributes specials specials"
|
|
"skills specials specials"
|
|
}
|
|
|
|
div.sheet-high-contrast {grid-area: high-contrast;}
|
|
div.sheet-eat {grid-area: eat;}
|
|
div.sheet-drink {grid-area: drink;}
|
|
div.sheet-home {grid-area: home;}
|
|
div.sheet-languages {grid-area: languages;}
|
|
div.sheet-reserves {grid-area: reserves;}
|
|
div.sheet-who {grid-area: who;}
|
|
div.sheet-attributes {grid-area: attributes;}
|
|
div.sheet-skills {grid-area: skills;}
|
|
div.sheet-specials {grid-area: specials;}
|
|
div.sheet-content {grid-area: sheet-content;}
|
|
div.sheet-sidebar {grid-area: sidebar;}
|
|
div.sheet-footer {grid-area: footer;}
|
|
div.sheet-status-stress {grid-area: stress;}
|
|
div.sheet-status-exhaustion {grid-area: exhaustion;}
|
|
div.sheet-status-pain {grid-area: pain;}
|
|
div.sheet-status-hunger {grid-area: hunger;}
|
|
div.sheet-status-misc {grid-area: misc;}
|
|
div.sheet-status-advantage {grid-area: advantage;}
|
|
div.sheet-status-disadvantage {grid-area: disadvantage;}
|
|
|
|
div.sheet-inventory {
|
|
grid-area : inventory;
|
|
display : grid;
|
|
grid-template-columns : 33.3% 33.3% 33.3%;
|
|
grid-template-areas : "weapons armor items";
|
|
}
|
|
|
|
div.sheet-weapons {grid-area: weapons;}
|
|
div.sheet-armor {grid-area: armor;}
|
|
div.sheet-items {grid-area: items;}
|
|
|
|
div.sheet-item-items {
|
|
display : grid;
|
|
grid-template-columns : auto auto auto;
|
|
grid-template-areas : "item-bonus item-name item-sacrifice-value"
|
|
"item-description item-description item-description";
|
|
}
|
|
|
|
div.sheet-item-armor {
|
|
display : grid;
|
|
grid-template-columns : auto auto auto;
|
|
grid-template-areas : "item-bonus item-name item-sacrifice-value"
|
|
"item-armor-value item-empty item-armor-points"
|
|
"item-description item-description item-description";
|
|
}
|
|
|
|
div.sheet-item-weapons {
|
|
display : grid;
|
|
grid-template-columns : auto auto auto;
|
|
grid-template-areas : "item-bonus item-name item-sacrifice-value"
|
|
"item-damage item-range item-range"
|
|
"item-description item-description item-description";
|
|
}
|
|
|
|
div.sheet-item-title{grid-area: item-title;}
|
|
div.sheet-item-bonus{grid-area: item-bonus;}
|
|
div.sheet-item-name{grid-area: item-name;}
|
|
div.sheet-item-sacrifice-value{grid-area: item-sacrifice-value;}
|
|
div.sheet-item-damage{grid-area: item-damage;}
|
|
div.sheet-item-range{grid-area: item-range;}
|
|
div.sheet-item-description{grid-area: item-description;}
|
|
div.sheet-item-armor-value{grid-area: item-armor-value;}
|
|
div.sheet-item-armor-points{grid-area: item-armor-points;}
|
|
div.sheet-item-empty{grid-area: item-empty;}
|
|
|
|
/************************************/
|
|
/* Allgemeine Layouts */
|
|
/************************************/
|
|
|
|
.sheet-hidden {
|
|
display : none;
|
|
}
|
|
|
|
.sheet-box {
|
|
background-color : var(--box-bg);
|
|
border : var(--box-border);
|
|
display : grid;
|
|
border-radius : 10px;
|
|
margin : 2px;
|
|
}
|
|
|
|
.sheet-container {
|
|
background-color : var(--container-bg);
|
|
display : grid;
|
|
border : none;
|
|
margin : 0;
|
|
}
|
|
|
|
div.sheet-status-stress, div.sheet-status-exhaustion, div.sheet-status-pain, div.sheet-status-hunger,
|
|
div.sheet-status-misc, div.sheet-status-advantage, div.sheet-status-disadvantage {
|
|
text-align : center;
|
|
}
|
|
|
|
img.sheet-reserve-image, img.sheet-status-image {
|
|
width : 35px;
|
|
}
|
|
|
|
div.sheet-title, span.sheet-title {
|
|
display : inline-block;
|
|
background-color : var(--title-bg);
|
|
border : var(--title-border);
|
|
width : 100%;
|
|
max-height : min-content;
|
|
font-weight : bold;
|
|
border-radius : 10px;
|
|
}
|
|
|
|
span.sheet-attribute, span.sheet-skill, div.sheet-inventory input.sheet-number {
|
|
border : var(--input-border);
|
|
border-radius : 10px;
|
|
}
|
|
|
|
span.sheet-attribute-label, span.sheet-skill-label {
|
|
display : inline-block;
|
|
width : 140px;
|
|
font-weight : bold;
|
|
}
|
|
|
|
span.sheet-label {
|
|
font-weight : bold;
|
|
}
|
|
|
|
span.sheet-reserve {
|
|
position : relative;
|
|
left : -10px;
|
|
border : var(--input-border);
|
|
border-style : solid solid solid none;
|
|
border-radius : 10px;
|
|
}
|
|
|
|
span.sheet-no-line-break {
|
|
white-space : nowrap !important;
|
|
}
|
|
|
|
button.sheet-plus {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/status-plus.png) !important;
|
|
}
|
|
|
|
button.sheet-minus {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/status-minus.png) !important;
|
|
}
|
|
|
|
button.sheet-disadvantage {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/disadvantage.png) !important;
|
|
}
|
|
|
|
button.sheet-advantage {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/advantage.png) !important;
|
|
}
|
|
|
|
button.sheet-dice1 {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/dice-1.png) !important;
|
|
top : -15px;
|
|
}
|
|
|
|
button.sheet-dice2 {
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/dice-2.png) !important;
|
|
top : -15px;
|
|
}
|
|
|
|
div.sheet-skills button.sheet-dice2 {
|
|
position : relative;
|
|
top : 0px;
|
|
left : 20px;
|
|
}
|
|
|
|
button.sheet-disadvantage, button.sheet-advantage, button.sheet-plus, button.sheet-minus, button.sheet-dice1, button.sheet-dice2 {
|
|
width : 20px;
|
|
height : 20px;
|
|
padding : 0px;
|
|
margin : 0px;
|
|
background-size : 20px 20px;
|
|
background-repeat : no-repeat;
|
|
background-color : rgba(0, 0, 0, 0);
|
|
text-align : center;
|
|
border : 0;
|
|
}
|
|
|
|
button.sheet-challenge {
|
|
position : relative;
|
|
width : 60px;
|
|
height : 60px;
|
|
top : 30px;
|
|
padding : 0px;
|
|
margin : 0px;
|
|
background-size : 60px 60px;
|
|
background-repeat : no-repeat;
|
|
background-color : rgba(0, 0, 0, 0);
|
|
text-align : center;
|
|
border : 0;
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/dice-flash.png) !important;
|
|
}
|
|
|
|
button.sheet-challenge::before {
|
|
display:none;
|
|
}
|
|
|
|
button.sheet-challenge:hover{
|
|
background-position: 0;
|
|
}
|
|
|
|
button.sheet-reroll {
|
|
color : var(--button-text-color);
|
|
position : relative;
|
|
top : 35px;
|
|
}
|
|
|
|
select.sheet-reroll {
|
|
position : relative;
|
|
top : 35px;
|
|
}
|
|
|
|
div.sheet-item-name input.sheet-text {
|
|
text-align : center;
|
|
font-weight : bold;
|
|
}
|
|
|
|
div.sheet-item-sacrifice-value, div.sheet-item-range, div.sheet-item-armor-points {
|
|
text-align : right;
|
|
}
|
|
|
|
div.sheet-footer {
|
|
text-align : center;
|
|
font-weight : normal;
|
|
}
|
|
|
|
div.sheet-sidebar {
|
|
display : inline-block;
|
|
}
|
|
|
|
div.sheet-sidebar span.sheet-title {
|
|
display : block;
|
|
width : 100%;
|
|
}
|
|
|
|
div.sheet-sidebar select {
|
|
width : 40px;
|
|
}
|
|
|
|
div.sheet-sidebar select.sheet-fullwidth {
|
|
width : 90%;
|
|
}
|
|
|
|
td.sheet-align-right {
|
|
text-align : center;
|
|
width : 20px;
|
|
}
|
|
|
|
td.sheet-width-50 {
|
|
width : 50%;
|
|
}
|
|
|
|
/************************************/
|
|
/* Eingabe-Felder */
|
|
/************************************/
|
|
|
|
/* Pfeile in den Eingabefeldern verbergen */
|
|
/* Chrome, Safari, Edge, Opera*/
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Pfeile in den Eingabefeldern verbergen */
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input.sheet-number {
|
|
color : var(--sheet-text-color);
|
|
width : 25px !important;
|
|
text-align : center;
|
|
border : 0;
|
|
background-color : rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
input.sheet-title {
|
|
color : var(--sheet-text-color);
|
|
font-weight : bold;
|
|
}
|
|
|
|
textarea.sheet-text, input.sheet-text {
|
|
color : var(--sheet-text-color);
|
|
width : 98%;
|
|
border : 0;
|
|
background-color : rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
textarea.sheet-text {
|
|
height : 40px;
|
|
}
|
|
|
|
/************************************/
|
|
/* Fake-Buttons */
|
|
/************************************/
|
|
|
|
input.sheet-supress-effect {
|
|
opacity : 0;
|
|
width : 16px;
|
|
height : 16px;
|
|
position : relative;
|
|
top : 5px;
|
|
left : 6px;
|
|
margin : -10px;
|
|
cursor : pointer;
|
|
z-index : 1;
|
|
border : none;
|
|
}
|
|
|
|
input.sheet-supress-effect + span::before, input.sheet-supress-effect:checked + span::before
|
|
{
|
|
margin-right : 4px;
|
|
border : none;
|
|
line-height : 14px;
|
|
text-align : center;
|
|
display : inline-block;
|
|
vertical-align : middle;
|
|
width : 16px;
|
|
height : 16px;
|
|
content : "-";
|
|
background-size : 16px 16px;
|
|
}
|
|
|
|
input.sheet-supress-effect + span::before
|
|
{
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/moral-inactive.png) !important;
|
|
}
|
|
|
|
input.sheet-supress-effect:checked + span::before
|
|
{
|
|
background-image : url(https://raw.githubusercontent.com/Gorthian/FSG_CharacterSheet_Roll20/main/images/moral.png) !important;
|
|
}
|
|
|
|
/************************************/
|
|
/* Roll Templates */
|
|
/************************************/
|
|
|
|
.sheet-rolltemplate-challenge .sheet-template-container {
|
|
border : 1px solid #B5A883;
|
|
background-color : #645A51 !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-challenge .sheet-template-header {
|
|
background-color : #D4B938;
|
|
max-height : min-content;
|
|
font-weight : bold;
|
|
border-radius : 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-challenge .sheet-template-row {
|
|
background-color : #C2AF80 !important;
|
|
font-weight : bold;
|
|
|
|
display : grid;
|
|
grid-template-columns : 80% 20%;
|
|
grid-template-areas : "key value";
|
|
}
|
|
|
|
.sheet-rolltemplate-challenge .sheet-template-key {
|
|
grid-area : key;
|
|
}
|
|
|
|
.sheet-rolltemplate-challenge .sheet-template-value {
|
|
grid-area : value;
|
|
} |