mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
573 lines
9.8 KiB
CSS
573 lines
9.8 KiB
CSS
.charsheet {
|
|
width: 830px;
|
|
background: white;
|
|
}
|
|
|
|
.sheet-damagedice {
|
|
width: 45px;
|
|
-webkit-appearance: none;
|
|
border-radius:0;
|
|
}
|
|
.sheet-modbox {
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: black;
|
|
font-weight: bold;
|
|
font-size: 20px !important;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-selecter {
|
|
width: 90px;
|
|
border-radius: 0;
|
|
border: none;
|
|
-webkit-appearance: none;
|
|
border-radius:0;
|
|
background-color: black;
|
|
font-weight: bold;
|
|
font-size: 20px !important;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-namer {
|
|
width: 180px !important;
|
|
border-radius: 0;
|
|
border: none;
|
|
border-radius:0;
|
|
background-color: black;
|
|
font-weight: bold;
|
|
font-size: 18px ;
|
|
color: white;
|
|
text-align: left !important;
|
|
}
|
|
.sheet-floater {
|
|
float: left;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
height: auto;
|
|
width: 97%;
|
|
}
|
|
|
|
textarea,
|
|
input {
|
|
outline: none;
|
|
box-shadow: none;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.sheet-header textarea,
|
|
.sheet-header input {
|
|
border: none;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
}
|
|
|
|
select {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number]:disabled::-webkit-inner-spin-button,
|
|
input[type=number]:disabled::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
|
|
.repcontainer .btn,
|
|
.repcontrol .btn {
|
|
border-radius: 0;
|
|
background-image: none;
|
|
border: none;
|
|
}
|
|
|
|
|
|
/* ===== LAYOUT ===== */
|
|
.sheet-col-left {
|
|
float: left;
|
|
width: 39%;
|
|
}
|
|
|
|
.sheet-col-right {
|
|
float: right;
|
|
width: 60%;
|
|
}
|
|
|
|
|
|
/* ===== TOGGLE ===== */
|
|
.sheet-toggle:not(:checked) ~ .sheet-hide,
|
|
.sheet-toggle:checked ~ .sheet-show {
|
|
display: none;
|
|
}
|
|
|
|
/* ===== SECTION HEADERS ===== */
|
|
.sheet-header {
|
|
background-color: #000;
|
|
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: 4px;
|
|
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"] {
|
|
width: 2.2em;
|
|
}
|
|
|
|
.sheet-header input[type="number"] {
|
|
width: 2.7em;
|
|
}
|
|
|
|
.sheet-header input[type="number"]:disabled {
|
|
width: 2em;
|
|
}
|
|
|
|
.sheet-header 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: 3px;
|
|
}
|
|
|
|
.sheet-header > * {
|
|
text-align: right;
|
|
float: right;
|
|
height: 100%;
|
|
}
|
|
|
|
.sheet-header .sheet-section-name {
|
|
margin-right: 2px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
|
|
/* ===== SECTION HEADERS ===== */
|
|
.sheet-header2 {
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 2px 0px;
|
|
vertical-align: middle;
|
|
line-height: 100%;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
font-size: 12px;
|
|
margin: 3px 0px;
|
|
border-radius: 4px;
|
|
padding: 2px 2px 2px 8px;
|
|
}
|
|
|
|
.sheet-header2 input {
|
|
height: 28px;
|
|
|
|
border: none;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.sheet-header2 input[type="text"] {
|
|
width: 3.2em;
|
|
}
|
|
|
|
.sheet-header2 input[type="number"] {
|
|
width: 2.7em;
|
|
}
|
|
|
|
.sheet-header2 input[type="number"]:disabled {
|
|
width: 2em;
|
|
}
|
|
|
|
.sheet-header2 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: 3px;
|
|
}
|
|
|
|
.sheet-header2 > * {
|
|
text-align: left;
|
|
float: right;
|
|
clear: right;
|
|
height: 100%;
|
|
}
|
|
|
|
.sheet-header2 .sheet-section-name {
|
|
margin-right: 2px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
|
|
|
|
/* ===== MAIN HEADER ===== */
|
|
.sheet-topbar {
|
|
height: 50px;
|
|
padding: 4px 2% 4px 2%;
|
|
}
|
|
|
|
.sheet-topbar.sheet-header > input {
|
|
height: 100%;
|
|
width: 50%;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
background-color: black;
|
|
color: white;
|
|
|
|
font-size: 38px;
|
|
line-height: 42px;
|
|
}
|
|
|
|
.sheet-topbar > .sheet-field-name {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-topbar > .sheet-field-class {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* ===== STATISTICS ===== */
|
|
.sheet-statistics {
|
|
width: 100%;
|
|
margin-left: 0.5%;
|
|
}
|
|
|
|
.sheet-statistics .sheet-header {
|
|
width: 18%;
|
|
font-size: 12px;
|
|
float: left;
|
|
margin-right: 0.6%;
|
|
}
|
|
|
|
.sheet-statistics .sheet-header:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* ===== ATTRIBUTES ===== */
|
|
.sheet-attributes {
|
|
margin-left: 1%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header {
|
|
height: auto;
|
|
width: 15%;
|
|
float: left;
|
|
margin-right: 0.5%;
|
|
padding: 4px;
|
|
padding-bottom: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-attributes .sheet-header > label {
|
|
height: 1em;
|
|
width: calc(90% - 8px);
|
|
margin: 0;
|
|
padding: 1px 2px;
|
|
margin: 0 5%;
|
|
|
|
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;
|
|
}
|
|
|
|
/* ===== UTILITY ===== */
|
|
.sheet-clearfix {
|
|
clear: both;
|
|
}
|
|
|
|
.sheet-right {
|
|
float: right !important;
|
|
}
|
|
|
|
.sheet-left {
|
|
float: left !important;
|
|
}
|
|
|
|
|
|
/* ===== TWEAKS ===== */
|
|
.sheet-section-moves textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.sheet-section-moves input[name="attr_movename"],
|
|
.sheet-section-spells input[name="attr_spellname"] {
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-section-gear input[name="attr_itemtags"] {
|
|
width: 85%;
|
|
float: left;
|
|
}
|
|
|
|
.sheet-section-gear input[name="attr_itemweight"] {
|
|
width: 15%;
|
|
float: left;
|
|
}
|
|
|
|
/* ===== TABS ===== */
|
|
div.sheet-tab-content { display: none; }
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-tab1,
|
|
input.sheet-tab2:checked ~ div.sheet-tab2,
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-tab
|
|
{
|
|
width: 49.5%;
|
|
height: 20px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -1px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-tab::before
|
|
{
|
|
content: attr(title);
|
|
border: solid 1px black;
|
|
text-align: center;
|
|
display: inline-block;
|
|
background: black;
|
|
color: white;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
height: 20px;
|
|
font-size: 18px;
|
|
content: attr(title) "►";
|
|
|
|
}
|
|
|
|
input.sheet-tab:checked::before
|
|
{
|
|
border-bottom-color: white;
|
|
background: white;
|
|
color: black;
|
|
content: attr(title) "▼";
|
|
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
}
|
|
|
|
input.sheet-tab:not(:first-child)::before
|
|
{
|
|
border-left: none;
|
|
}
|
|
|
|
input.sheet-tab2::before
|
|
{
|
|
background: black;
|
|
color: white;
|
|
content: attr(title) "►";
|
|
}
|
|
|
|
input.sheet-tab2:checked::before
|
|
{
|
|
background: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
content: attr(title) "▼";
|
|
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
|
|
}
|
|
|
|
div.sheet-tab-content
|
|
{
|
|
border: 1px solid #a8a8a8;
|
|
border-top-color: #000;
|
|
margin: 2px 0 0 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
div.sheet-tab2
|
|
{
|
|
background-color: #fcecec;
|
|
}
|
|
|
|
/* ROLL TEMPLATE */
|
|
.sheet-rolltemplate-dw table {
|
|
width: 100%;
|
|
border: 2px solid;
|
|
color: black;
|
|
font-size: 1em;
|
|
font-family: "Averia Libre", Light;
|
|
}
|
|
|
|
.sheet-rolltemplate-dw th {
|
|
background-color: black;
|
|
color: #ffffff;
|
|
font-family: "Metamorphous" !important;
|
|
padding: 2px;
|
|
border-bottom: 1px solid black;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
}
|
|
.sheet-rolltemplate-dw .endline {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-dw .userscript-generic {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-dw td {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-dw tr:nth-child(odd) {
|
|
background-color: rgba(217, 217, 214,1);
|
|
}
|
|
|
|
.sheet-rolltemplate-dw tr:nth-child(even) {
|
|
background-color: rgba(233, 233, 233,1);
|
|
}
|
|
|
|
.sheet-rolltemplate-dw .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/
|
|
}
|
|
|
|
.sheet-rolltemplate-aw .inlinerollresult,
|
|
.sheet-rolltemplate-aw .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-aw .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-aw .inlinerollresult.importantroll{
|
|
background-color: transparent;
|
|
color: #000000;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-aw .sheet-success .inlinerollresult,
|
|
.sheet-rolltemplate-aw .sheet-success .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-aw .sheet-success .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-aw .sheet-success .inlinerollresult.importantroll{
|
|
background-color: transparent;
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-aw .sheet-failure .inlinerollresult,
|
|
.sheet-rolltemplate-aw .sheet-failure .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-aw .sheet-failure .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-aw .sheet-failure .inlinerollresult.importantroll{
|
|
background-color: transparent;
|
|
color: #B31515;
|
|
border: none;
|
|
}
|