Initial upload to get background images working
This commit is contained in:
cbkcook
@@ -0,0 +1,298 @@
|
||||
|
||||
|
||||
/*----------------- FONTS ------------------*/
|
||||
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great|Limelight&display=swap');
|
||||
|
||||
/*
|
||||
font-family: 'Fredericka the Great', cursive;
|
||||
font-family: 'Limelight', cursive;
|
||||
*/
|
||||
|
||||
|
||||
/*----------------- BACKGROUND ------------------*/
|
||||
|
||||
.charsheet {
|
||||
background-image: url(https://unsplash.com/photos/Jx2zS5K_dyA); /*blue wooden boards for a beach town vibe*/
|
||||
/*background-color: white;*/
|
||||
background-repeat: repeat;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/*----------------- GRIDS ------------------*/
|
||||
|
||||
|
||||
|
||||
.sheet-main {
|
||||
|
||||
}
|
||||
|
||||
.sheet-main-top {
|
||||
display: grid;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
grid-gap: 6px;
|
||||
grid-template-columns: 400px;
|
||||
grid-template-rows: 50px;
|
||||
grid-template-areas:"tabselector";
|
||||
}
|
||||
|
||||
.sheet-main-maven {
|
||||
display: grid;
|
||||
width: 100vw;
|
||||
height: 600px;
|
||||
grid-gap: 6px;
|
||||
grid-template-columns: 200px 240px 200px 100px ;
|
||||
grid-template-rows: 40px 1fr 40px 1fr 40px 1fr 10px;
|
||||
grid-template-areas:"credname credname credname credname"
|
||||
"creda creda credb credb"
|
||||
"damagename damagename damagename damagename"
|
||||
"damage damage damage damage"
|
||||
"equipname equipname equipname equipname"
|
||||
"equipment equipment equipment equipmentempty"
|
||||
"pc pc pc pc";
|
||||
}
|
||||
|
||||
|
||||
.sheet-main-clues {
|
||||
display: grid;
|
||||
width: 100vw;
|
||||
height: 200px;
|
||||
grid-gap: 6px;
|
||||
grid-template-columns: 200px 1fr 200px 1fr ;
|
||||
grid-template-rows: 40px 1fr 40px 1fr 10px;
|
||||
grid-template-areas:"genname genname genname genname"
|
||||
"genabilities genabilities genabilities genabilities"
|
||||
"boostername boostername boostername boostername"
|
||||
"booster booster booster boosterempty"
|
||||
"gen gen gen gen";
|
||||
|
||||
}
|
||||
|
||||
/*----------------- GENERAL CSS ------------------*/
|
||||
|
||||
textarea {
|
||||
width: 70%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
textarea.sheet-notetext{
|
||||
width: 800px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
|
||||
.sheet-section {
|
||||
padding: 5px;
|
||||
border-style: solid;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.sheet-flex-col {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
/*justify-content: flex-start;*/
|
||||
}
|
||||
|
||||
.sheet-flex-col-center {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
/*justify-content: flex-start;*/
|
||||
}
|
||||
|
||||
.sheet-flex-center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.sheet-hide-section {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------Hide and Display section of Code-------------------------------- */
|
||||
/* Configure the tab buttons*/
|
||||
.sheet-main-maven,
|
||||
.sheet-main-clues {display: none;}
|
||||
|
||||
/* show the selected tab */
|
||||
.sheet-tabstoggle[value="maven"] ~ div.sheet-main-maven,
|
||||
.sheet-tabstoggle[value="clues"] ~ div.sheet-main-clues {display: grid;}
|
||||
|
||||
|
||||
/*------------- Section-specific CSS -------------*/
|
||||
|
||||
|
||||
h1 {
|
||||
|
||||
font-family: 'Limelight', cursive;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
font-family: 'Limelight', cursive;
|
||||
color: black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
button.sheet-tabbutton {
|
||||
|
||||
font-family: 'Limelight', cursive;
|
||||
background-image: url(https://unsplash.com/photos/1TY3MGq-hOQ); /*wooden boards for a beach town vibe*/
|
||||
background-color: white;
|
||||
background-repeat: repeat;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
width: 140px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sheet-tabselector {
|
||||
grid-area: tabselector;
|
||||
font-family: 'Montserrat', sans-serif
|
||||
color: green;
|
||||
/*flex-direction: column;*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Format repeating sections */
|
||||
|
||||
div.sheet-equipment-row,
|
||||
div.sheet-booster-row {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 600px;
|
||||
column-gap: 5px;
|
||||
}
|
||||
div.sheet-equipment-row input[type="text"],
|
||||
div.sheet-booster-row input[type="text"] {
|
||||
width: 250px;
|
||||
height: 50.21px;
|
||||
}
|
||||
div.sheet-equipment-row textarea,
|
||||
div.sheet-booster-row textarea {
|
||||
width: 550px;
|
||||
height: 40px;
|
||||
}
|
||||
div.sheet-equipment-row input[type="number"],
|
||||
div.sheet-booster-row input[type="number"] {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
||||
/* Roll template formatting */
|
||||
|
||||
/* Smaller margins - remove these if you want the huge default left margin */
|
||||
.sheet-rolltemplate-custom {
|
||||
margin-left: -37px;
|
||||
}
|
||||
.withoutavatars .sheet-rolltemplate-custom {
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-custom .sheet-container {
|
||||
border: 1px solid;
|
||||
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
||||
border-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
/* Header formatting - title and subtitle */
|
||||
.sheet-rolltemplate-custom .sheet-header {
|
||||
background-color: var(--header-bg-color);
|
||||
/* change text-align to center to center the header text */
|
||||
text-align: left;
|
||||
color: var(--header-text-color);
|
||||
padding: 5px;
|
||||
}
|
||||
.sheet-rolltemplate-custom .sheet-title {
|
||||
font-size:1.1em;
|
||||
}
|
||||
.sheet-rolltemplate-custom .sheet-subtitle {
|
||||
font-size:.9em;
|
||||
}
|
||||
|
||||
.sheet-rolld6 {
|
||||
color: #500000;
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.sheet-sheettype button[type=roll].sheet-rolld6::before {
|
||||
font-family: "dicefontd6";
|
||||
content: "F";
|
||||
font-size: 2em;
|
||||
color: rgb(13, 84, 18);
|
||||
}
|
||||
|
||||
/* example colors */
|
||||
.sheet-rolltemplate-custom .sheet-container {
|
||||
/* this is the default color */
|
||||
--header-bg-color: rgb(13, 84, 18);
|
||||
--header-text-color: #FFF;
|
||||
}
|
||||
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
|
||||
--header-bg-color: #F00;
|
||||
}
|
||||
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
|
||||
--header-bg-color: #0F0;
|
||||
--header-text-color: #000;
|
||||
}
|
||||
|
||||
/* Allprops part */
|
||||
.sheet-rolltemplate-custom .sheet-content {
|
||||
display: grid;
|
||||
background: #FFF;
|
||||
/* Header formatting - modify the column layout below */
|
||||
grid-template-columns: auto auto;
|
||||
/* Line height to match default roll template */
|
||||
line-height:1.4em;
|
||||
}
|
||||
.sheet-rolltemplate-custom .sheet-content > div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Left column */
|
||||
.sheet-rolltemplate-custom .sheet-content .sheet-key {
|
||||
font-weight: bold;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Empty rule, use this if you want to change the right column
|
||||
.sheet-rolltemplate-custom .sheet-value {
|
||||
}
|
||||
*/
|
||||
|
||||
/* Make even-numbered rows grey */
|
||||
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
|
||||
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
|
||||
background:#EEE;
|
||||
}
|
||||
|
||||
/* Description field */
|
||||
.sheet-rolltemplate-custom .sheet-desc {
|
||||
grid-column: span 2;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<div class="sheet-main">
|
||||
|
||||
<input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='pc' />
|
||||
|
||||
<div class="sheet-main-top sheet-flex-col">
|
||||
|
||||
|
||||
<button type="action" name="act_maven" class="sheet-tabbutton" >Maven</button>
|
||||
<button type="action" name="act_clues" class="sheet-tabbutton" >Clues</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main tab (PC sheet) -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Clues tab -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Roll template -->
|
||||
|
||||
<rolltemplate class="sheet-rolltemplate-custom">
|
||||
<div class="sheet-container sheet-color-{{color}}">
|
||||
<div class="sheet-header">
|
||||
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
|
||||
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
|
||||
</div>
|
||||
<div class="sheet-content">
|
||||
{{#allprops() title subtitle desc color}}
|
||||
<div class="sheet-key">{{key}}</div>
|
||||
<div class="sheet-value">{{value}}</div>
|
||||
{{/allprops() title subtitle desc color}}
|
||||
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
|
||||
|
||||
<script type="text/worker">
|
||||
|
||||
|
||||
//Buttons for Tabs
|
||||
const buttonlist = ["maven","clues"];
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
setAttrs({
|
||||
sheetTab: button,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"html": "BrindlewoodBay.html",
|
||||
"css": "BrindlewoodBay.css",
|
||||
"authors": "Christine Cook",
|
||||
"roll20userid": "4360886",
|
||||
"preview": "preview.png",
|
||||
"instructions": "Compatible for use with Brindlewood Bay, a Powered by the Apocalypse game. You can reach me at christine.cook1538@yahoo.ca if there are issues, or you have questions.",
|
||||
"legacy": false
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
Reference in New Issue
Block a user