Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 19:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fcd1def69752e4e94de164b3d14432b2c2ce0ae8
roll20-character-sheets/Pirate Borg/pirateborgsheet.css
T
Blair fef238611b Update background images for Pirate Borg sheets 
Fix Imgur links being blocked in UK
2025-10-07 10:27:32 +10:00

1009 lines
17 KiB
CSS
Executable File
Raw Blame History

/*----------------- Main Layout ------------------*/
/* A CSS Grid example using "grid-template-areas"
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
*/
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Pirata+One&display=swap');
/*Configure the tab buttons*/
.charsheet .sheet-pc,
.charsheet .sheet-npc,
.charsheet .sheet-ship {
display: none;
}
/* show the selected tab */
.charsheet .sheet-tabstoggle[value="pc"] ~ div.sheet-pc,
.charsheet .sheet-tabstoggle[value="npc"] ~ div.sheet-npc,
.charsheet .sheet-tabstoggle[value="ship"] ~ div.sheet-ship {
display: block;
}
.sheet-pc{
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_Character_Sheet_BG.jpg');
background-repeat: no-repeat;
background-color: white;
height: 853px;
width: 904px;
background-position-x: -10px;
background-position-y: -10px;
}
.sheet-ship{
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_Ship_Sheet_BG.jpg');
background-repeat: no-repeat;
background-color: white;
height: 853px;
width: 904px;
background-position-x: -10px;
background-position-y: -10px;
}
.sheet-npc{
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pirate%20Borg/Pirate_Borg_NPC_Sheet_BG.jpg');
background-repeat: no-repeat;
background-color: white;
height: 853px;
width: 904px;
background-position-x: -10px;
background-position-y: -10px;
}
.page-switcher {
position: absolute;
top: 67px;
}
main {
display: grid;
min-width: 830px;
grid-gap: 4px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-template-areas:"common skill items"
"description ship vessel";
}
.charsheet {
background-repeat: no-repeat;
background-color: white;
width: 904px;
height: 853px;
}
.noborder input{
background: none;
border: none;
box-shadow: none;
color: #000 !important;
}
.noborder select{
background: none;
border: none;
box-shadow: none;
color: #000 !important;
}
.noborder textarea{
background: none;
border: none;
box-shadow: none;
color: #000 !important;
}
/*----------------- PC Sheet Field Positioning ------------------*/
.randompirate {
position: absolute;
top: 0;
right: 0;
}
.character_name {
position: absolute;
top: 180px;
left: 75px;
}
.character_name input {
font-size: 2em;
font-weight: 800;
width: 245px;
}
.class {
position: absolute;
top: 217px;
left: 101px;
}
.class input {
font-size: 1.5em;
font-weight: normal;
width: 200px;
font-style: italic;
}
.features {
position: absolute;
top: 264px;
left: 75px;
}
.features textarea {
font-size: 1em;
font-weight: normal;
width: 167px !important;
height: 94px !important;
font-style: normal;
}
.spell_use {
position: absolute;
top: 323px;
left: 275px;
}
.spell_use input{
font-size: 2em;
font-weight: normal;
width: 1.75em !important;
text-align: center;
}
.spell_use button{
position: absolute;
top: -56px;
left: 2px;
}
.ritual {
position: absolute;
top: 452px;
left: 75px;
width: 132px;
}
.ritual input{
width: 132px;
margin: 0 !important;
}
.ritual_use {
position: absolute;
top: 548px;
left: 262px;
}
.ritual_use input{
font-size: 2em;
font-weight: normal;
width: 1.75em !important;
text-align: center;
}
.ritual_use button{
position: absolute;
top: -60px;
left: -1px;
}
.ritual div.f-row.nowrap{
height: 1.5em;
}
.background {
position: absolute;
top: 719px;
left: 66px;
width: 200px;
}
.flaws {
position: absolute;
top: 719px;
left: 358px;
width: 200px;
}
.trademark {
position: absolute;
top: 726px;
left: 679px;
width: 200px;
}
.idiosyncrasies {
position: absolute;
top: 837px;
left: 66px;
width: 200px;
}
.incidents {
position: absolute;
top: 837px;
left: 358px;
width: 200px;
}
.thing_of_importance {
position: absolute;
top: 845px;
left: 696px;
width: 195px;
}
.hp{
position: absolute;
top: 118px;
left: 384px;
transform: rotate(-15deg);
}
.hp_max{
position: absolute;
top: 104px;
left: 441px;
transform: rotate(-15deg);
}
.hp input, .hp_max input{
font-family: 'Pirata One';
}
.stat button{
position: absolute;
top: 19px;
left: -21px;
}
.stat input{
font-size: 3em;
font-weight: 800;
width: 62px !important;
text-align: center;
}
.stat select{
font-size: 2.5em;
font-weight: 800;
width: 66px !important;
text-align: center;
height: 54px;
}
.strength {
position: absolute;
top: 271px;
left: 475px;
transform: rotate(-5deg);
}
.agility {
position: absolute;
top: 321px;
left: 480px;
}
.presence {
position: absolute;
top: 365px;
left: 478px;
transform: rotate(5deg);
}
.toughness {
position: absolute;
top: 418px;
left: 472px;
transform: rotate(10deg);
}
.spirit {
position: absolute;
top: 464px;
left: 444px;
transform: rotate(15deg);
}
.luck {
position: absolute;
top: 547px;
left: 399px;
}
.luck input{
font-size: 3em;
font-weight: 800;
width: 57px !important;
text-align: center;
font-family: 'Pirata One';
}
.luck button{
position: absolute;
top: 57px;
left: 43px;
}
.luck_radio {
position: absolute;
top: 615px;
left: 350px;
}
.luck_radio input{
margin-right:7px;
}
input[type="radio"] {
accent-color: black;
}
.equipment {
position: absolute;
top: 307px;
left: 50px;
width: 181px;
}
.equipment div.f-row.nowrap{
height: 1.5em;
}
.equipment textarea{
height: 1em !important;
}
.silver {
position: absolute;
top: 510px;
left: 230px;
}
.silver input{
font-size: 2em;
font-weight: normal;
width: 4em !important;
text-align: center;
transform: rotate(39deg);
}
.items {
position: absolute;
top: 57px;
left: 527px;
}
.armor {
background-color: #FFFFFF !important;
}
.armor label{
color: #FF0000 !important;
}
input[name="attr_armor_name"] {
width: 345px;
}
/*----------------- Ship Sheet Field Positioning ------------------*/
.ship-name {
position: absolute;
top: 139px;
left: 112px;
}
.ship-name input {
font-size: 1.4em;
font-weight: 800;
width: 245px;
font-style: italic;
}
.ship-hp {
position: absolute;
top: 247px;
left: 98px;
}
.ship-hp input, .ship-hp-current input{
width: 100px !important;
}
.ship-hp-current {
}
.ship-hp-max {
}
.ship-hp input{
font-family: 'Pirata One' !important;
}
.ship-hull {
position: absolute;
top: 76px;
left: 700px;
}
.ship-hull input{
font-size: 3em;
font-weight: 800;
width: 57px !important;
text-align: center;
font-family: 'Pirata One';
}
.ship-hull button{
position: absolute;
top: 57px;
left: 43px;
}
.ship-hull-radio {
position: absolute;
top: 356px;
left: 189px;
}
.ship-hull-radio input{
margin-right:9px;
}
.ship-skill {
position: absolute;
top: 408px;
left: 284px;
}
.ship-broadsides {
position: absolute;
top: 506px;
left: 243px;
}
.ship-broadsides-count {
position: absolute;
top: 468px;
left: 269px;
}
.ship-small-arms-count {
position: absolute;
top: 544px;
left: 267px;
}
.ship-broadsides-count input,
.ship-small-arms-count input {
font-size: 1.4em;
font-weight: 800;
width: 38px !important;
height: 30px !important;
text-align: center;
}
.ship-broadsides-count label,
.ship-small-arms-count label {
font-size: 1.4em;
}
.ship-stat input{
font-size: 3em;
font-weight: 800;
width: 62px !important;
text-align: center;
}
.ship-stat select{
font-size: 1.4em;
font-weight: 800;
width: 75px !important;
text-align: center;
height: 32px;
background: #FFF;
}
.ship-small-arms {
position: absolute;
top: 582px;
left: 243px;
}
.ship-agility {
position: absolute;
top: 647px;
left: 243px;
}
.ship-speed{
position: absolute;
top: 709px;
left: 283px;
}
.ship-class{
position: absolute;
top: 182px;
left: 340px;
}
.ship-class input{
text-align:center;
font-size: 1.5em;
font-weight: 800;
}
.ship-ram{
position: absolute;
top: 136px;
left: 466px;
}
.ship-ram select{
font-size: 1em !important;
width: 56px !important;
height: 36px !important;
}
.ship-ram button{
top: 3px !important;
left: -21px !important;
}
.ship-cargo-max{
position: absolute;
top: 253px;
left: 494px;
}
.ship-cargo{
position: absolute;
top: 307px;
left: 365px;
}
.vessel .repcontainer[data-groupname="repeating_cargo"], .items .repcontainer[data-groupname="repeating_items"] {
width: 196px;
}
.ship-crew-min{
position: absolute;
top: 570px;
left: 349px;
}
.ship-crew-max{
position: absolute;
top: 570px;
left: 486px;
}
.ship-crew-min label, .ship-crew-max label, .ship-cargo-max label{
font-size: 0.7em;
}
.ship-captain{
position: absolute;
top: 123px;
left: 591px;
}
.ship-quartermaster{
position: absolute;
top: 223px;
left: 591px;
}
.ship-special{
position: absolute;
top: 323px;
left: 591px;
width: 210px;
height: 10em;
}
.ship-special textarea{
height: 20em !important;
}
.ship-quartermaster label, .ship-captain label, .ship-special label{
color: #FFF;
}
/*----------------- NPC/Monster Sheet Field Positioning ------------------*/
.npc-name{
position: absolute;
top: 153px;
left: 112px;
}
.npc-name input {
font-size: 1.4em;
font-weight: 800;
width: 245px;
font-style: italic;
}
.npc-desc{
position: absolute;
top: 167px;
left: 390px;
}
.npc-desc textarea{
width: 450px !important;
height: 140px !important;
}
.npc-hp {
position: absolute;
top: 263px;
left: 142px;
}
.npc-hp input, .npc-morale input{
font-family: 'Pirata One' !important;
}
.npc-morale {
position: absolute;
top: 397px;
left: 172px;
}
.npc-armor input{
font-size: 3em;
font-weight: 800;
width: 57px !important;
text-align: center;
font-family: 'Pirata One';
}
.npc-armor button{
position: absolute;
top: 57px;
left: 43px;
}
.npc-armor-radio {
position: absolute;
top: 548px;
left: 177px;
}
.npc-armor-radio input{
margin-right:6px;
}
.npc-armor-desc {
position: absolute;
top: 514px;
left: 93px;
}
.npc-attack1{
position: absolute;
top: 386px;
left: 754px;
}
.npc-attack1-desc {
position: absolute;
top: 400px;
left: 390px;
}
.npc-attack2{
position: absolute;
top: 505px;
left: 759px;
}
.npc-attack1 input, .npc-attack2 input{
width: 75px !important;
font-size: 2em !important;
text-align: left;
}
.npc-attack2-desc{
position: absolute;
top: 525px;
left: 390px;
}
.npc-special{
position: absolute;
top: 650px ;
left: 390px;
}
.npc-special textarea{
width: 425px !important;
height: 200px !important;
}
/*----------------- GENERAL CSS ------------------*/
section {
padding: 5px;
border: 1px solid #dddddd;
}
/* CSS Flexbox styling, used for adjusting how content inside section behaves */
.f-col {
display: flex;
flex-direction: column;
}
.f-row {
display: flex;
flex-direction: row;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.nowrap {
display: flex;
flex-wrap: nowrap;
}
.f-center {
align-items: center;
justify-content: center;
}
.right {
float: right;
}
/*----------------- Text & Input styling -----------------*/
/* these are for overwriting default CSS that comes from Roll20 */
.charsheet * {
font-family: 'IM Fell English', serif;
}
.charsheet h3{
font-family: 'Pirata One', serif;
text-align: center;
}
.charsheet label{
margin: 3px;
padding: 3px 0 0 0;
}
.charsheet input[type="text"], input[type="number"]{
margin: 2px 4px;
}
.charsheet textarea {
width: 95%;
height: 4em;
}
/*------------- Section-specific CSS -------------*/
.skill {
grid-area: skill;
border: none;
box-shadow: none;
}
.common {
grid-area: common;
border: none;
box-shadow: none;
}
.vessel .repcontainer[data-groupname="repeating_cargo"],
.items .repcontainer[data-groupname="repeating_items"] {
padding-bottom: 0.2em;
border: none;
box-shadow: none;
}
.vessel .repcontainer[data-groupname="repeating_cargo"] .repitem,
.items .repcontainer[data-groupname="repeating_items"] .repitem {
margin: 4px 0px;
border: none;
box-shadow: none;
}
.items {
grid-area: items;
border: none;
box-shadow: none;
}
.description {
grid-area: description;
}
.ship {
grid-area: ship;
border: none;
box-shadow: none;
}
.vessel {
grid-area: vessel;
border: none;
box-shadow: none;
}
.highlight {
color: var(--header-bg-color, #a83521);
}
.w-auto {
width: auto;
}
.weapon-name {
width: 9em;
}
.weapon-attack-type,
.weapon-dmg-die {
width: 7em;
}
.weapon > * {
margin-right: 1em;
}
.tab-selector {
margin: 70px 0 5px 10px;
}
/*------------------------------------*\
#ROLL TEMPLATES
\*------------------------------------*/
.sheet-rolltemplate-rolls {
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-rolls .sheet-container {
border: 3px solid black;
border-radius: 3px;
}
.sheet-rolltemplate-rolls .sheet-header {
background-color: var(--header-bg-color, #000);
color: var(--header-text-color, #FFF);
text-align: left;
text-transform: capitalize;
padding: 5px;
border-bottom: 2px solid black;
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-rolls .sheet-title,
.sheet-rolltemplate-rolls .sheet-name {
font-size: 1.4em;
font-weight: normal;
}
.sheet-rolltemplate-rolls .sheet-subtitle {
font-size: 1em;
font-family: 'IM Fell English', serif !important;
font-style: italic;
}
.sheet-rolltemplate-rolls .sheet-container {
--header-bg-color: #000;
--header-text-color: #FFF;
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-rolls .sheet-content {
display: grid;
background: #FFF;
grid-template-columns: auto auto;
line-height: 2em;
font-size: 1.4em;
}
.sheet-rolltemplate-rolls .sheet-content > div {
padding: 5px;
}
.sheet-rolltemplate-rolls .sheet-content .sheet-key {
font-weight: normal;
font-weight: normal;
padding-right: 10px;
text-align: right;
}
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) {
background: #EEE;
}
.sheet-rolltemplate-attack, .sheet-rolltemplate-shipattack {
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-attack .sheet-container, .sheet-rolltemplate-shipattack .sheet-container {
border: 3px solid black;
border-radius: 3px;
}
.sheet-rolltemplate-attack .sheet-header, .sheet-rolltemplate-shipattack .sheet-header {
background-color: var(--header-bg-color, #000);
color: var(--header-text-color, #FFF);
text-align: left;
text-transform: capitalize;
padding: 5px;
border-bottom: 2px solid black;
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-attack .sheet-title,
.sheet-rolltemplate-attack .sheet-name,
.sheet-rolltemplate-shipattack .sheet-title,
.sheet-rolltemplate-shipattack .sheet-name{
font-size: 1.4em;
font-weight: normal;
}
.sheet-rolltemplate-attack .sheet-subtitle,
.sheet-rolltemplate-shipattack .sheet-subtitle {
font-size: 1em;
font-family: 'IM Fell English', serif !important;
font-style: italic;
}
.sheet-rolltemplate-attack .sheet-container,
.sheet-rolltemplate-shipattack .sheet-container{
--header-bg-color: #000;
--header-text-color: #FFF;
font-family: 'IM Fell English', serif !important;
}
.sheet-rolltemplate-attack .sheet-content,
.sheet-rolltemplate-shipattack .sheet-content{
display: grid;
background: #FFF;
grid-template-columns: auto auto;
line-height: 2em;
font-size: 1.4em;
}
.sheet-rolltemplate-attack .sheet-content > div,
.sheet-rolltemplate-shipattack .sheet-content > div {
padding: 5px;
}
.sheet-rolltemplate-attack .sheet-content .sheet-key,
.sheet-rolltemplate-shipattack .sheet-content .sheet-key {
font-weight: normal;
font-weight: normal;
padding-right: 10px;
text-align: right;
}
.sheet-rolltemplate-shipattack .sheet-content .sheet-fumble,
.sheet-rolltemplate-shipattack .sheet-content .sheet-crit{
font-size: 0.7em;
line-height: 1em;
grid-column: span 2;
}
.sheet-rolltemplate-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-attack .sheet-content :nth-child(4n) {
background: #EEE;
}
.sheet-rolltemplate-shipattack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-shipattack .sheet-content :nth-child(4n) {
background: #EEE;
}
/*----------------- Dark Mode ------------------*/
body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea,
body.sheet-darkmode .charsheet {
}
body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
color: #F00;
text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
background-color: #1e2021;
background-image: linear-gradient(#181a1b, #26292b);
border-color: #3e4446 #3e4446 #43494c;
box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
}
.sheet-rolltemplate-darkmode .sheet-key,
.sheet-rolltemplate-darkmode .sheet-fumble,
.sheet-rolltemplate-darkmode .sheet-crit {
color: #000;
}
Reference in New Issue View Git Blame Copy Permalink