Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
roll20-character-sheets/Beacon/beacon.css
T
Todd Mitchell 2b65250e4b Final fixes for Jan 22 update 
- Minor Cosmetic changes
- Isolate bonuses on update page
-Moved base attack and damage info to combat tab
-Set minimum 0 for damage and fatigue selectors
-Fix hunter attack bonus for ranged
-Add rogue Skill selector
2022-01-29 15:49:12 -05:00

940 lines
18 KiB
CSS
Raw Permalink Blame History

/* Beacon: Tabbed Character Sheet CSS */
/* Version 2 */
/* overall wrapper to fix moving width issues with overflow on hidden sections */
.charsheet .sheet-overall-wrapper {
max-width: 830px;
min-width: 830px;
}
/* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */
.charsheet div[class^="repcontrol"] {
margin-bottom: 5px;
}
.charsheet div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn repcontrol_add"] {
display: inline-block!important;
visibility: hidden;
}
/* ALTER repeating section controls */
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
font-size: 9px;
text-align: center;
text-transform: uppercase;
margin-bottom: 5px;
color:#ffffff;
background-color:#000000;
background-image: -moz-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: -webkit-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: -o-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: -ms-repeating-radial-gradient(center center, circle cover, #000000, #ce0632100%);
background-image: repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
margin-top: 10px;
border-radius: 10px;
}
/* Fake tabs style1 (reskinned radio button; fixed to work properly in firefox */
div.sheet-maintab-content
{
display: none;
}
input.sheet-player:checked ~ div.sheet-player,
input.sheet-update:checked ~ div.sheet-update,
input.sheet-monster:checked ~ div.sheet-monster
{
display: block;
}
input.sheet-maintab
{
width: 15%;
height: 16px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span.sheet-maintab
{
text-align: center;
display: inline-block;
width: 15%;
height: 16px;
font-size: 10px;
background: #ce0632; /*REDish*/
color: white;
font-weight: bold;
border-radius: 4px;
margin-left: -15%
}
.charsheet input.sheet-maintab:checked + span.sheet-player,
.charsheet input.sheet-maintab:checked + span.sheet-update,
.charsheet input.sheet-maintab:checked + span.sheet-monster
{
background: #009e73; /*GREEN*/
color: white;
border-radius: 4px;
}
div.sheet-maintab-content
{
border: 1px solid #a8a8a8; /*GREY*/
border-top-color: #000;
margin: 2px 0 0 5px;
padding: 5px;
}
label,
label div
{
font-size: 12px;
font-weight: normal;
}
/* Player Sheet Tabs */
.charsheet div[class^="sheet-section"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet input.sheet-tab1:checked ~ div.sheet-section-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-combat,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-inventory,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-notes,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-magic {
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: auto;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"]
{
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
}
.charsheet input.sheet-tab
{
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
.charsheet span.sheet-tab
{
text-align: center;
display: inline-block;
font-size: 13px;
background: #ce0632;
color: white;
font-weight: bold;
border-radius: 4px;
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -91px;
}
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab99:checked + span.sheet-tab99
{
background: #009e73;
color: white;
border-radius: 4px;
}
/* END Player sheet tabs */
/* Graphic Boxes */
.charsheet .sheet-2colrow .sheet-col
{
width: calc(50% - 3px) !important;
height: 32px;
margin-right: 2px !important;
}
.charsheet .sheet-2colrow .sheet-col:last-child
{
margin-right: 0 !important;
}
.charsheet input.sheet-AC,
.charsheet input.sheet-HP
{
margin-top: 16px;
margin-bottom: 34px;
padding: 0px;
height: 44px;
width: 48px;
font-size: 21px;
line-height: 48px;
font-weight: bold;
vertical-align: middle;
text-align: center;
border: 0;
}
.charsheet input.sheet-HP2
{
margin-top: 16px;
margin-bottom: 34px;
padding: 0px;
height: 44px;
width: 50px;
font-size: 21px;
line-height: 48px;
font-weight: bold;
vertical-align: middle;
text-align: center;
border: 1;
}
.charsheet .sheet-ACBG
{
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Beacon/Assets/shield.png') no-repeat 20% 0% / 6.6em auto;
}
.charsheet .sheet-HPBG
{
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Beacon/Assets/hp.png') no-repeat 20% 0% / 6.6em auto;
}
/* Spell Page Settings */
.charsheet div[class^="sheet-spell-page"]
{
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet input.sheet-spelltab0:checked ~ div.sheet-spell-page0,
.charsheet input.sheet-spelltab1:checked ~ div.sheet-spell-page1,
.charsheet input.sheet-spelltab2:checked ~ div.sheet-spell-page2,
.charsheet input.sheet-spelltab3:checked ~ div.sheet-spell-page3,
.charsheet input.sheet-spelltab4:checked ~ div.sheet-spell-page4,
.charsheet input.sheet-spelltab5:checked ~ div.sheet-spell-page5,
.charsheet input.sheet-spelltab6:checked ~ div.sheet-spell-page6
{
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
}
.charsheet input.sheet-spelltab99:checked ~ div[class^="sheet-spell-page"]
{
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
}
.charsheet input.sheet-spelltab0:checked ~ span.sheet-spelltab0,
.charsheet input.sheet-spelltab1:checked ~ span.sheet-spelltab1,
.charsheet input.sheet-spelltab2:checked ~ span.sheet-spelltab2,
.charsheet input.sheet-spelltab3:checked ~ span.sheet-spelltab3,
.charsheet input.sheet-spelltab4:checked ~ span.sheet-spelltab4,
.charsheet input.sheet-spelltab5:checked ~ span.sheet-spelltab5,
.charsheet input.sheet-spelltab6:checked ~ span.sheet-spelltab6,
.charsheet input.sheet-spelltab99:checked ~ span.sheet-spelltab99
{
background: #009e73;
color: white;
border-radius: 4px;
}
.charsheet input.sheet-spellpagetab
{
width: 70px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
.charsheet span.sheet-spellpagetab
{
text-align: center;
display: inline-block;
font-size: 13px;
background: #ce0632;
color: white;
font-weight: bold;
border-radius: 4px;
width: 70px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -73px;
}
/* END Spell Page Settings */
/* Borders for spell page and class action repeating section rows */
div[data-groupname^="repeating_items"] .repitem,
.sheet-zero-row {
border: 1px solid #000000;
border-radius: 12px;
margin-left: 1px;
margin-bottom: 5px;
background: #eee;
}
div[data-groupname^="repeating_"] .repitem,
.sheet-zero-row
{
border: 1px solid #000000;
border-radius: 12px;
margin-left: 1px;
margin-bottom: 5px;
background: #eee;
}
div[data-groupname^="repeating_spellbook"] .repitem,
.sheet-zero-row
{
border: 1px solid #000000;
border-radius: 12px;
margin-left: 1px;
margin-bottom: 5px;
background: #eee;
}
/* spell type tab Settings */
.charsheet div[class^="sheet-spell-type"]
{
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
.charsheet input.sheet-spelltypeDescription:checked ~ div.sheet-spell-type-Description
{
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
}
.charsheet input.sheet-spelltypeDescription:checked ~ span.sheet-spelltypeDescription
{
background: rgb(0,158,115);
color: white;
border-radius: 4px;
}
.charsheet input.sheet-spelltypetab {
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 999;
}
.charsheet span.sheet-spelltypetab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #7d160f;
color: white;
font-weight: bold;
border-radius: 4px;
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -73px;
}
/* END spell type tab Settings */
/* Table Settings */
.charsheet table {
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #404040;
}
.charsheet td,
.charsheet th,
.charsheet tr,
.charsheet tbody,
.charsheet thead {
border: 1px solid #404040;
padding: 5px;
}
/* END Table settings */
/* General sheet wide Styles */
.charsheet {
background-color: white;
}
.charsheet button, input, select, textarea,
.charsheet .sheet-row [class *= "sheet-col"],
.charsheet [class *= "sheet-col"] {
font-size: 12px;
}
.charsheet .sheet-spell-row-number,
.charsheet .sheet-inventory-row-number {
text-align: center;
font-weight: bold;
}
.charsheet .sheet-large-label {
font-size: 90%!important;
font-style: italic;
font-weight: bold;
}
.charsheet .sheet-last-updated {
font-size: 90%!important;
font-style: italic;
font-weight: bold;
margin: 0;
}
.charsheet .sheet-checkbox-row {
line-height: 28px;
text-align: center;
}
.charsheet .sheet-padl,
.sheet-rolltemplate-DccTabbed .sheet-padl {
padding-left:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.charsheet .sheet-padr,
.sheet-rolltemplate-DccTabbed .sheet-padr {
padding-right:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.charsheet .sheet-padt,
.sheet-rolltemplate-DccTabbed .sheet-padt{
padding-top:12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.charsheet .sheet-padb,
.sheet-rolltemplate-DccTabbed .sheet-padb {
padding-bottom:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.charsheet .sheet-border-right {
border-right: 1px solid #000;
}
.charsheet .sheet-border-left {
border-left: 1px solid #000;
}
.charsheet input[type=number], .charsheet input[type=text], .charsheet select {
width: 100%!important;
margin-bottom:2px!important;
}
.charsheet input[type=number] {
text-align: center;
}
.charsheet input[type=text].sheet-underlined {
box-shadow: 0px -2px 0px 0px #000000 inset;
}
.charsheet input[type=number].sheet-underlined {
box-shadow: 0px -2px 0px 0px #000000 inset;
}
.charsheet hr
{
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0));
margin: 5px 0;
}
.charsheet span.sheet-spacer
{
display: block;
margin-top: 5px;
}
.charsheet .sheet-heading-row
{
text-align: center;
font-weight: bold;
}
.charsheet .sheet-footer-row
{
text-align: center;
font-weight: bold;
border-bottom: 1px solid #dddddd;
margin-bottom: 5px;
}
.charsheet .sheet-vert-middle
{
vertical-align: middle!important;
}
.charsheet .sheet-vert-bottom
{
vertical-align: bottom!important;
}
.charsheet .sheet-center
{
text-align: center;
}
.charsheet .sheet-left
{
text-align: left;
}
.charsheet .sheet-right
{
text-align: right;
}
.charsheet .sheet-centerselect
{
margin-left: auto;
margin-right: auto;
display: block!important;
}
.charsheet textarea {
width: calc(100% - 10px);
height: 150px;
resize:none;
}
.charsheet textarea.sheet-fluid {
width: calc(100% - 10px);
height: 100%;
}
.charsheet textarea.sheet-small {
width: calc(100% - 150px);
height: 50px;
}
.charsheet textarea.sheet-medium {
width: calc(100% - 10px);
height: 100px;
}
.charsheet textarea.sheet-large {
width: calc(100% - 10px);
height: 300px;
}
.charsheet textarea.sheet-extralarge {
width: calc(100% - 10px);
height: 700px;
}
.charsheet h3 {
font-size: 12px;
text-align: center;
text-transform: uppercase;
margin-bottom: 5px;
color:#ffffff;
background-color:#000000;
background-image: -moz-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: -webkit-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: -o-repeating-radial-gradient(center center, circle cover, #000000, ##ce0632 100%);
background-image: -ms-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
background-image: repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
margin-top: 10px;
border-radius: 12px;
}
.charsheet h4 {
background-color: #000000;
color: #ffffff;
font-size: 12px;
border-radius: 12px;
padding-left: 5px;
margin-bottom: 5px;
}
.charsheet h5 {
background-color: #93537c;
color: #ffffff;
font-size: 12px;
border-radius: 12px;
padding-left: 5px;
margin-bottom: 5px;
}
.charsheet input[disabled] {
background-color: #eaffef;
border-color: #ddd;
cursor: not-allowed;
-moz-appearance: textfield;
}
/* .charsheet input[disabled].sheet-passive-skill-score {
background-color: #def6fc;
border-color: #ddd;
cursor: not-allowed;
-moz-appearance: textfield;
} */
.charsheet input[disabled]::-webkit-inner-spin-button,
.charsheet input[disabled]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet .sheet-small-note
{
text-align: center;
font-family: Arial;
font-size: 10px;
}
.charsheet select
{
font-size: 90%;
}
.charsheet .sheet-important-text
{
text-decoration: underline;
color: #ff0000;
}
.charsheet .sheet-sub-header {
background-color: #cecece;
vertical-align: bottom;
border-radius: 12px;
margin-bottom: 3px;
}
.charsheet .sheet-footer {
background-color: rgba(250, 202, 78, 0.2);
vertical-align: bottom;
border-radius: 12px;
margin-top: 3px;
}
.charsheet .sheet-spell-header {
background-color: #c7d1bf;
vertical-align: bottom;
border-radius: 12px;
margin-bottom: 3px;
}
.charsheet input.sheet-BoldText {
font-size: 1.0em;
font-weight: bold;
vertical-align: middle;
text-align: center;
}
.charsheet input.sheet-highlight {
background-color: #ccffff;
}
/* Conditional formatting */
.charsheet input.sheet-redbox {
background-color: #ccffff;
}
input.sheet-enccheck[value="1"] ~ input.sheet-redbox {
background-color: #ce0632;
color: #ffffff;
font-weight: bold;
}
/* Header section */
.charsheet img.sheet-icon {
width: 100px;
height: 100px;
}
/* Core stat section */
.charsheet .sheet-core-stat-label {
background-color: #000000;
color: #ffffff;
font-size: 14px!important;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
/* Skills section */
.charsheet .sheet-skill-row {
margin: 1px 0;
}
.charsheet .sheet-skill-roll {
padding: 0 5px!important;
height:29px;
}
.charsheet .sheet-skill-name {
margin-top: 5px;
font-size: 11px!important;
}
.charsheet .sheet-skill-checkbox {
margin-top: 5px;
}
.charsheet .sheet-margin-top {
margin-top: 5px;
}
.charsheet .sheet-margin-bottom {
margin-bottom: 5px;
}
/* Custom Pure Grid CSS (24 cols) DO NOT EDIT BELOW THIS LINE OR RISK BREAKING FORMATTING */
.sheet-row
{
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
text-rendering: optimizespeed;
}
.sheet-opera-only :-o-prefocus, .sheet-row
{
word-spacing: -0.43em;
}
.sheet-col
{
display: inline-block;
zoom: 1; *display: inline;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.sheet-col-1, .sheet-col-1-2, .sheet-col-1-3,.sheet-col-1-4, .sheet-col-1-5,.sheet-col-1-6, .sheet-col-1-7,
.sheet-col-1-8, .sheet-col-1-9,.sheet-col-1-10, .sheet-col-1-11, .sheet-col-1-12, .sheet-col-1-13,
.sheet-col-1-14, .sheet-col-1-15,.sheet-col-1-16, .sheet-col-1-17, .sheet-col-1-19
{
display: inline-block;
zoom: 1;
*display: inline;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.sheet-col-1 {
display:block;
}
.sheet-col-1-2 {
width: 50%;
}
.sheet-offset-1-2 {
margin-left: 50%;
}
.sheet-col-1-3 {
width: 33.33333%;
}
.sheet-offset-1-3 {
margin-left: 33.33333%;
}
.sheet-col-1-4 {
width: 25%;
}
.sheet-offset-1-4 {
margin-left: 25%;
}
.sheet-col-1-5 {
width: 20%;
}
.sheet-offset-1-5 {
margin-left: 20%;
}
.sheet-col-1-6 {
width: 16.66667%;
}
.sheet-offset-1-6 {
margin-left: 16.66667%;
}
.sheet-col-1-7 {
width: 14.28571%;
}
.sheet-offset-1-7 {
margin-left: 14.28571%;
}
.sheet-col-1-8 {
width: 12.5%;
}
.sheet-offset-1-8 {
margin-left: 12.5%;
}
.sheet-col-1-9 {
width: 11.11111%;
}
.sheet-offset-1-9 {
margin-left: 11.11111%;
}
.sheet-col-1-10 {
width: 10%;
}
.sheet-offset-1-10 {
margin-left: 10%;
}
.sheet-col-1-11 {
width: 9.09091%;
}
.sheet-offset-1-11 {
margin-left: 9.09091%;
}
.sheet-col-1-12 {
width: 8.33333%;
}
.sheet-offset-1-12 {
margin-left: 8.33333%;
}
.sheet-col-1-13 {
width: 7.69231%;
}
.sheet-offset-1-13 {
margin-left: 7.69231%;
}
.sheet-col-1-14 {
width: 7.14286%;
}
.sheet-offset-1-14 {
margin-left: 7.14286%;
}
.sheet-col-1-15 {
width: 6.66667%;
}
.sheet-offset-1-15 {
margin-left: 6.66667%;
}
.sheet-col-1-16 {
width: 6.25%;
}
.sheet-offset-1-16 {
margin-left: 6.25%;
}
.sheet-col-1-17 {
width: 5.88235%;
}
.sheet-offset-1-17 {
margin-left: 5.88235%;
}
.sheet-col-1-18 {
width: 5.55556%;
}
.sheet-offset-1-18 {
margin-left: 5.55556%;
}
.sheet-col-1-19 {
width: 5.26316%;
}
.sheet-offset-1-19 {
margin-left: 5.26316%;
}
.sheet-row-r {
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
}
.sheet-opera-only :-o-prefocus, .sheet-row-r
{
word-spacing: -0.43em;
}
.sheet-row-r img
img {
max-width: 100%;
}
/* End custom Pure grid css (24 cols) */
Reference in New Issue View Git Blame Copy Permalink