mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
682 lines
14 KiB
CSS
682 lines
14 KiB
CSS
.charsheet {
|
|
width: 850px;
|
|
background: white;
|
|
}
|
|
div{
|
|
border-radius: 0px;
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea,
|
|
input {
|
|
outline: none;
|
|
box-shadow: none;
|
|
margin-bottom: 1px;
|
|
font-family: Arial;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.sheet-header textarea,
|
|
.sheet-header input {
|
|
border: none;
|
|
}
|
|
|
|
input[type=number],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
}
|
|
input[type=number]{
|
|
text-align: right;
|
|
}
|
|
select {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
input[disabled],
|
|
input[readonly] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
input[type=number]:disabled::-webkit-inner-spin-button,
|
|
input[type=number]:disabled::-webkit-outer-spin-button,
|
|
input[type=number]:read-only::-webkit-inner-spin-button,
|
|
input[type=number]:read-only::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.repcontainer .btn,
|
|
.repcontrol .btn {
|
|
border-radius: 0;
|
|
background-image: none;
|
|
border: none;
|
|
}
|
|
|
|
|
|
/* ===== LAYOUT ===== */
|
|
.sheet-col-left {
|
|
display: inline-block;
|
|
width: 320px;
|
|
vertical-align: top;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sheet-col-right {
|
|
display: inline-block;
|
|
width: 520px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
/* ===== TOGGLE ===== */
|
|
.sheet-toggle:not(:checked) ~ .sheet-hide,
|
|
.sheet-toggle:checked ~ .sheet-show {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* ===== SECTION HEADERS ===== */
|
|
.sheet-header {
|
|
display: inline-block;
|
|
background: linear-gradient(to right bottom, #3D2923 40%, #700200, #DE6928);
|
|
color: #fff;
|
|
padding: 2px 0px;
|
|
vertical-align: middle;
|
|
line-height: 100%;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 1.1em;
|
|
margin: 3px 0px;
|
|
box-align: center;
|
|
border-radius: 0px;
|
|
padding: 2px 2px 2px 8px;
|
|
}
|
|
.sheet-header input {
|
|
height: 28px;
|
|
border: none;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
margin: 2px;
|
|
}
|
|
.sheet-header input[type="text"].sheet-alipeu{
|
|
width:218px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
.sheet-header input[type="text"] {
|
|
width: 2.2em;
|
|
}
|
|
.sheet-header input[type=number] {
|
|
width: 2.7em;
|
|
}
|
|
.sheet-header input[type=number]:disabled,
|
|
.sheet-header input[type=number]:read-only {
|
|
width: 2em;
|
|
}
|
|
button[type="roll"] {
|
|
height: 28px;
|
|
width: 28px;
|
|
margin: 2px;
|
|
padding: 4px;
|
|
padding-top: 5px;
|
|
|
|
font-size: 20px;
|
|
text-align: center;
|
|
|
|
background: white;
|
|
border: none;
|
|
border-radius: 0px;
|
|
}
|
|
button[type="roll"]:hover{
|
|
color: #DE6928; /* #700200; #CD071E; */
|
|
font-weight: bold;
|
|
}
|
|
.sheet-header > * {
|
|
text-align: right;
|
|
height: 100%;
|
|
}
|
|
|
|
.sheet-header .sheet-section-name {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
/* ===== MAIN HEADER ===== */
|
|
.sheet-topbar {
|
|
display: block;
|
|
padding: 4px;
|
|
background: white;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.sheet-topbar div{
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.sheet-topbar img{
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.sheet-topbar input {
|
|
height: 45px;
|
|
padding: 3px;
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.sheet-topbar .sheet-field-name {
|
|
width: 370px;
|
|
text-align: center;
|
|
background-color: white;
|
|
color: #3D2923;
|
|
}
|
|
|
|
.sheet-topbar input.sheet-field-class {
|
|
width: 200px;
|
|
text-align: center;
|
|
/* background-color: #3D2923; */
|
|
background: linear-gradient(to bottom right, #3D2923 40%, #700200, #DE6928);
|
|
color: white;
|
|
}
|
|
.sheet-topbar select.sheet-field-class {
|
|
width: 26px;
|
|
text-align: left;
|
|
background: linear-gradient(to bottom right, #3D2923 40%, #700200, #DE6928);
|
|
color: white;
|
|
}
|
|
.sheet-topbar select.sheet-field-class option {
|
|
color: black;
|
|
}
|
|
|
|
|
|
/* ===== STATISTICS ===== */
|
|
.sheet-statistics {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-statistics .sheet-header {
|
|
/* width: 18%;
|
|
margin-right: 0.6%; */
|
|
}
|
|
|
|
.sheet-statistics .sheet-header:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* ===== ATTRIBUTES ===== */
|
|
.sheet-attributes {
|
|
display: block;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header {
|
|
height: auto;
|
|
width: 15%;
|
|
margin-right: 2px;
|
|
padding: 4px;
|
|
padding-bottom: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header > label {
|
|
height: 1em;
|
|
width: 100px;
|
|
margin: 0;
|
|
padding: 1px 2px;
|
|
margin: 0 12px;
|
|
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
|
|
background: white;
|
|
transform: skew(-10deg);
|
|
-webkit-transform: skew(-10deg);
|
|
|
|
position: absolute;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header > label.sheet-top {
|
|
top: -5px;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header > label.sheet-bottom {
|
|
bottom: -2px;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header input[type=number] {
|
|
background: white;
|
|
width: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-attributes .sheet-row-1 input {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-attributes .sheet-row-2 {
|
|
width: 100%;
|
|
height: 16px;
|
|
padding: 1px;
|
|
overflow: hidden;
|
|
line-height: 14px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-attributes .sheet-row-2 label {
|
|
color: #DDD;
|
|
font-size: 80%;
|
|
}
|
|
|
|
.sheet-attributes .sheet-row-2 input {
|
|
height: 14px;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-attributes .sheet-row-3 button {
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
z-index: 1;
|
|
}
|
|
/* ==== Matériel ==== */
|
|
.sheet-gear {
|
|
width:100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding: 2px 0px 2px 0px;
|
|
border-bottom : 1px dashed #3D2923;
|
|
}
|
|
.sheet-section-gear input {
|
|
height: 25px;
|
|
}
|
|
.sheet-section-gear span {
|
|
color: gray;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-section-gear input[name="attr_itemname"] {
|
|
width: 250px;
|
|
}
|
|
.sheet-section-gear input[name="attr_itemweight"] {
|
|
width: 30px;
|
|
padding: 0;
|
|
}
|
|
.sheet-section-gear input[name="attr_itemuse"],
|
|
.sheet-section-gear input[name="attr_itemuse_max"]{
|
|
width: 34px;
|
|
padding: 0;
|
|
}
|
|
.sheet-section-gear input[name="attr_itemtags"]{
|
|
width: 216px;
|
|
}
|
|
|
|
/* ===== UTILITY ===== */
|
|
.sheet-right {
|
|
}
|
|
|
|
.sheet-left {
|
|
}
|
|
|
|
|
|
/* ===== TWEAKS ===== */
|
|
.sheet-section-alignment textarea,
|
|
.sheet-section-race textarea,
|
|
.sheet-section-bonds textarea{
|
|
resize: vertical;
|
|
}
|
|
|
|
/* ===== Check montrer/cacher ===== */
|
|
input[type="checkbox"].sheet-dispcheck{
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 20px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
margin: 0;
|
|
}
|
|
input[type="checkbox"].sheet-dispcheck + span{
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: -20px;
|
|
width: 20px;
|
|
max-width: 20px;
|
|
height: 20px;
|
|
z-index: 1;
|
|
font-family: pictos;
|
|
color: #DDB29B; /* #EFBAC1; */
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
}
|
|
input[type="checkbox"].sheet-dispcheck:hover + span{
|
|
color: #DE6928; /* #ADDDAD; */
|
|
}
|
|
input[type="checkbox"].sheet-dispcheck:checked + span{
|
|
font-weight: bold;
|
|
color: #700200; /* #557F55; */
|
|
}
|
|
div.sheet-dispcheck {
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
input[type="checkbox"].sheet-dispcheck:checked ~ div.sheet-dispcheck {
|
|
display: block;
|
|
}
|
|
/* ===== Sélection Check ===== */
|
|
input[type="checkbox"].sheet-selcheck{
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 20px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
margin: 0;
|
|
}
|
|
input[type="checkbox"].sheet-selcheck + span{
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: -20px;
|
|
width: 20px;
|
|
max-width: 20px;
|
|
height: 20px;
|
|
z-index: 1;
|
|
font-family: pictos;
|
|
color: #DDB29B; /* #EFBAC1; */
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
}
|
|
input[type="checkbox"].sheet-selcheck:hover + span{
|
|
color: #DE6928; /* #ADDDAD; */
|
|
}
|
|
input[type="checkbox"].sheet-selcheck:checked + span{
|
|
font-weight: bold;
|
|
color: #700200; /* #557F55; */
|
|
}
|
|
/* ==== Action ==== */
|
|
div.sheet-action {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding: 2px 0px 2px 0px;
|
|
border-bottom : 1px dashed #3D2923;
|
|
}
|
|
button[type="roll"].sheet-btAction {
|
|
width: 20px;
|
|
margin: 0px 1px 0px 1px;
|
|
font-size: 20px;
|
|
}
|
|
div.sheet-actionligne{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
span.sheet-action {
|
|
min-width: 60px;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
text-align: right;
|
|
color: gray;
|
|
font-style: italic;
|
|
}
|
|
select.sheet-action{
|
|
padding: 0;
|
|
height: 25px;
|
|
}
|
|
input[type=number].sheet-action{
|
|
padding: 2px;
|
|
height: 25px;
|
|
width: 35px;
|
|
}
|
|
input[type="text"].sheet-actionname {
|
|
font-weight: bold;
|
|
width: 460px;
|
|
height: 25px;
|
|
font-size: 14px;
|
|
}
|
|
textarea.sheet-actiondesc {
|
|
resize: vertical;
|
|
width: 450px;
|
|
display: inline-block;
|
|
}
|
|
/* ===== Onglets ===== */
|
|
div.sheet-onglbase,
|
|
div.sheet-onglspecial,
|
|
div.sheet-onglclasse,
|
|
div.sheet-onglavance,
|
|
div.sheet-onglsort{
|
|
display: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
margin: 1px 0px 1px 0px;
|
|
border: 1px solid #3D2923;
|
|
padding: 3px;
|
|
z-index: 0;
|
|
}
|
|
input[type="radio"].sheet-onglbase,
|
|
input[type="radio"].sheet-onglspecial,
|
|
input[type="radio"].sheet-onglclasse,
|
|
input[type="radio"].sheet-onglavance,
|
|
input[type="radio"].sheet-onglsort{
|
|
margin: 0;
|
|
margin-top: -10px;
|
|
margin-bottom: -4px;
|
|
padding: 0;
|
|
display: inline-block;
|
|
opacity: 0;
|
|
width: 90px;
|
|
height: 20px;
|
|
z-index: 2;
|
|
}
|
|
input[type="radio"].sheet-onglbase + span,
|
|
input[type="radio"].sheet-onglspecial + span,
|
|
input[type="radio"].sheet-onglclasse + span,
|
|
input[type="radio"].sheet-onglavance + span,
|
|
input[type="radio"].sheet-onglsort + span{
|
|
color: #666666;
|
|
background-color: #BBBBBB;
|
|
font-size:15px;
|
|
text-align:center;
|
|
display: inline-block;
|
|
width: 90px;
|
|
height: 20px;
|
|
margin: 0;
|
|
margin-left: -90px;
|
|
margin-right: -4px;
|
|
padding:0;
|
|
margin-bottom: -2px;
|
|
padding-top: 5px;
|
|
font-size: 0.9em;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-left-color: #666666;
|
|
border-top-color: #666666;
|
|
border-right-color: #666666;
|
|
border-bottom-color: #3D2923;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 15px;
|
|
z-index: 1;
|
|
}
|
|
input[type="radio"].sheet-onglbase:checked + span,
|
|
input[type="radio"].sheet-onglspecial:checked + span,
|
|
input[type="radio"].sheet-onglclasse:checked + span,
|
|
input[type="radio"].sheet-onglavance:checked + span,
|
|
input[type="radio"].sheet-onglsort:checked + span {
|
|
font-weight: bold;
|
|
/* color: #3D2923;
|
|
background-color: white; */
|
|
color: white;
|
|
background: linear-gradient(to top left, #3D2923 40%, #700200, #DE6928);
|
|
border-left-color: #3D2923;
|
|
border-top-color: #3D2923;
|
|
border-right-color: #3D2923;
|
|
border-bottom-color: #3D2923;
|
|
}
|
|
input[type="radio"].sheet-onglbase:checked ~ div.sheet-onglbase{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglspecial:checked ~ div.sheet-onglspecial{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglclasse:checked ~ div.sheet-onglclasse{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglavance:checked ~ div.sheet-onglavance{
|
|
display: block;
|
|
}
|
|
input[type="radio"].sheet-onglsort:checked ~ div.sheet-onglsort{
|
|
display: block;
|
|
}
|
|
/* ==== CLASSES ==== */
|
|
input[type="radio"].sheet-barde,
|
|
input[type="radio"].sheet-clerc,
|
|
input[type="radio"].sheet-druide,
|
|
input[type="radio"].sheet-guerrier,
|
|
input[type="radio"].sheet-magicien,
|
|
input[type="radio"].sheet-paladin,
|
|
input[type="radio"].sheet-ranger,
|
|
input[type="radio"].sheet-voleur{
|
|
display: none;
|
|
}
|
|
div.sheet-barde,
|
|
div.sheet-clerc,
|
|
div.sheet-druide,
|
|
div.sheet-guerrier,
|
|
div.sheet-magicien,
|
|
div.sheet-paladin,
|
|
div.sheet-ranger,
|
|
div.sheet-voleur {
|
|
display: none;
|
|
}
|
|
input[type="radio"].sheet-barde:checked ~ div.sheet-barde,
|
|
input[type="radio"].sheet-clerc:checked ~ div.sheet-clerc,
|
|
input[type="radio"].sheet-druide:checked ~ div.sheet-druide,
|
|
input[type="radio"].sheet-guerrier:checked ~ div.sheet-guerrier,
|
|
input[type="radio"].sheet-magicien:checked ~ div.sheet-magicien,
|
|
input[type="radio"].sheet-paladin:checked ~ div.sheet-paladin,
|
|
input[type="radio"].sheet-ranger:checked ~ div.sheet-ranger,
|
|
input[type="radio"].sheet-voleur:checked ~ div.sheet-voleur {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
/* ==== TEMPLATES ==== */
|
|
.sheet-rolltemplate-jet table{
|
|
background: white;
|
|
border: 1px solid #3D2923;
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
padding: 2px;
|
|
font-family: 'Verdana';
|
|
color: #3D2923;
|
|
font-size: 0.9em;
|
|
}
|
|
.sheet-rolltemplate-jet tr{
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-right: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
.sheet-rolltemplate-jet th{
|
|
padding: 3px;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
font-family: 'Contrail One';
|
|
color: white;
|
|
/* background: #3D2923; */
|
|
background: linear-gradient(to right, #3D2923 40%, #700200, #DE6928);
|
|
}
|
|
.sheet-rolltemplate-jet td{
|
|
padding: 2px;
|
|
text-align: left;
|
|
}
|
|
.sheet-rolltemplate-jet td.sheet-tcat{
|
|
color: #3D2923;
|
|
font-style: italic;
|
|
text-align: right;
|
|
border-right: 1px dashed #3D2923;
|
|
}
|
|
.sheet-rolltemplate-jet .sheet-subheader{
|
|
font-style: italic;
|
|
text-align: right;
|
|
border-bottom: 1px dashed #3D2923;
|
|
color: #3D2923;
|
|
}
|
|
.sheet-rolltemplate-jet .sheet-desctitre{
|
|
font-style: italic;
|
|
text-align: right;
|
|
border-bottom: 1px dashed #3D2923;
|
|
border-top: 1px solid #3D2923;
|
|
color: #3D2923;
|
|
}
|
|
.sheet-rolltemplate-jet div.sheet-jetdesc{
|
|
font-family: 'Verdana', serif;
|
|
font-size: 0.9em;
|
|
max-height: 140px;
|
|
overflow-y: auto;
|
|
}
|
|
.sheet-rolltemplate-jet .inlinerollresult{
|
|
font-size: 1em;
|
|
background-color: transparent;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-top-style: none;
|
|
border-right-style: none;
|
|
border-left-style: none;
|
|
border-bottom-style: none;
|
|
}
|
|
.sheet-rolltemplate-jet .inlinerollresult.fullcrit{
|
|
color: #3FB315;
|
|
font-size: 1em;
|
|
background-color: transparent;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-top-style: none;
|
|
border-right-style: none;
|
|
border-left-style: none;
|
|
border-bottom-style: none;
|
|
}
|
|
.sheet-rolltemplate-jet .inlinerollresult.fullfail{
|
|
color: #B31515;
|
|
font-size: 1em;
|
|
background-color: transparent;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-top-style: none;
|
|
border-right-style: none;
|
|
border-left-style: none;
|
|
border-bottom-style: none;
|
|
}
|
|
.sheet-rolltemplate-jet .inlinerollresult.importantroll{
|
|
color: #4A57ED;
|
|
font-size: 1em;
|
|
background-color: transparent;
|
|
border-width: 0px 0px 0px 0px;
|
|
border-top-style: none;
|
|
border-right-style: none;
|
|
border-left-style: none;
|
|
border-bottom-style: none;
|
|
}
|