mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Pendragon v1.03 (#6566)
* tweak styling * small visual improvements * clean up scss * update preview
This commit is contained in:
Cassie Levett
@@ -12,7 +12,7 @@
|
||||
"compile:sass": "node-sass pendragon.scss pendragon.css -w",
|
||||
"compile:pug": "pug pendragon.pug pendragon.html -w"
|
||||
},
|
||||
"keywords": [
|
||||
"keywords": [
|
||||
"Roll20"
|
||||
],
|
||||
"author": "Cassie",
|
||||
|
||||
+369
-574
File diff suppressed because it is too large
Load Diff
+17
-2402
File diff suppressed because one or more lines are too long
@@ -1,5 +1,4 @@
|
||||
input(name='attr_version' type='hidden' value='1.02')
|
||||
|
||||
input(name='attr_version' type='hidden' value='1.03')
|
||||
|
||||
//- INCLUDES
|
||||
=============================
|
||||
|
||||
@@ -1,19 +1,22 @@
|
||||
// COLORS
|
||||
// ============================= *
|
||||
$primary: #226aae;
|
||||
$secondary : rgb(214, 175, 94);
|
||||
$secondary : #ffd7001f;
|
||||
$light : #fefcea;
|
||||
$dark : hsl(0, 6%, 0%);
|
||||
$dark-font: #000;
|
||||
$gray : #4c4c4c;
|
||||
$transparentGray: hsla(0, 0%, 30%, 0.0784313725490196);
|
||||
$white : hsl(0, 0%, 96%);
|
||||
$gold: #ffd70066;
|
||||
|
||||
$box-shadow: 2px 2px 3px 1px #4c4c4c;
|
||||
|
||||
|
||||
/* GLOBALS
|
||||
============================= */
|
||||
============================= */
|
||||
@import url('https://fonts.googleapis.com/css?family=El+Messiri:wght@500&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
@@ -63,7 +66,9 @@ fieldset {
|
||||
h1 {
|
||||
color: $primary;
|
||||
text-transform: capitalize;
|
||||
font-family: serif;
|
||||
font-family: 'El Messiri', sans-serif;
|
||||
padding: 1% 2%;
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -118,6 +123,7 @@ input {
|
||||
label {
|
||||
margin-bottom: 0px;
|
||||
padding-right: 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
select {
|
||||
@@ -174,152 +180,19 @@ textarea {
|
||||
|
||||
/* GENERIC CLASSES
|
||||
============================= */
|
||||
div.sheet-background {
|
||||
background-color: $transparentGray;
|
||||
}
|
||||
|
||||
.sheet-border {
|
||||
border: 0.15em solid $gray;
|
||||
}
|
||||
|
||||
.sheet-bottom-border {
|
||||
border-bottom: 0.2em solid $dark;
|
||||
}
|
||||
|
||||
.sheet-pictos {
|
||||
font-family: "pictos";
|
||||
}
|
||||
|
||||
.sheet-d20 {
|
||||
font-family: "dicefontd20";
|
||||
}
|
||||
|
||||
.sheet-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sheet-font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-text-primary {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.sheet-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sheet-text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
div.sheet-2column {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-3column {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-4column {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-6column {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-2autocolumn {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
div.sheet-3autocolumn {
|
||||
grid-template-columns: auto 1fr 10%;
|
||||
}
|
||||
|
||||
div.sheet-col-3 {
|
||||
grid-template-columns: 1fr 3.5em 10%;
|
||||
}
|
||||
|
||||
div.sheet-gold-left-border {
|
||||
border-left: 0.2em solid $secondary;
|
||||
padding-left: 1%;
|
||||
}
|
||||
|
||||
div.sheet-gold-bottom-border {
|
||||
border-bottom: 0.2em solid $secondary;
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
|
||||
div.sheet-header {
|
||||
margin-top: 2%;
|
||||
border-top: 2px solid $primary;
|
||||
border-bottom: 2px solid $primary;
|
||||
text-align: center;
|
||||
background: #fefcea; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fefcea 0%, #ede4b4 50%, #fefcea 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, #fefcea 0%,#ede4b4 50%,#fefcea 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, #fefcea 0%,#ede4b4 50%,#fefcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fefcea',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
span.sheet-display {
|
||||
border-bottom: 2px dotted $dark;
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
div.sheet-repeating-container {
|
||||
button {
|
||||
font-variant: none;
|
||||
}
|
||||
}
|
||||
@import './src/scss/generic';
|
||||
|
||||
|
||||
/* STYLED CHECKBOXES
|
||||
============================= */
|
||||
label.sheet-styled-checkbox {
|
||||
input, span {
|
||||
grid-area: 1 / 1 / 1 / 1;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
position: relative;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
span {
|
||||
border: 2px solid $primary;
|
||||
display: inline-block;
|
||||
top: -20%;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
line-height: 90%;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
top: 20%;
|
||||
z-index: 2;
|
||||
|
||||
&[type="checkbox"]:checked + span {
|
||||
background-color: $primary;
|
||||
color : #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@import './src/scss/checkboxes';
|
||||
|
||||
/* TAB
|
||||
============================= */
|
||||
div.sheet-tabs {
|
||||
grid-template-columns: 3fr 1fr;
|
||||
margin-bottom: 2%;
|
||||
align-items: center;
|
||||
|
||||
div.sheet-type {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@@ -331,6 +204,8 @@ div.sheet-tabs {
|
||||
|
||||
label {
|
||||
padding: 5% 2%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -349,7 +224,8 @@ div.sheet-tabs {
|
||||
}
|
||||
|
||||
&:checked ~ span {
|
||||
background-color: $secondary;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -368,7 +244,7 @@ div.sheet-tabs {
|
||||
/* PC
|
||||
============================= */
|
||||
div.sheet-character {
|
||||
grid-template-columns: 1.8fr 1fr 1fr;
|
||||
grid-template-columns: 1.5fr 1fr 1fr;
|
||||
|
||||
h2 {
|
||||
padding-top: 5%;
|
||||
@@ -479,10 +355,6 @@ div.sheet-character {
|
||||
}
|
||||
|
||||
div.sheet-current-hit-points {
|
||||
textarea {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
input[name='attr_current_hit_points'] {
|
||||
border: 2px solid gold;
|
||||
min-height: 30px;
|
||||
@@ -570,17 +442,18 @@ div.sheet-holdings {
|
||||
}
|
||||
|
||||
div.sheet-col-4 {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(4, 1fr)
|
||||
}
|
||||
|
||||
div.sheet-col-3 {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-character-history {
|
||||
div.sheet-gold-bottom-border {
|
||||
grid-template-columns: 3fr 1fr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.sheet-events {
|
||||
@@ -628,7 +501,7 @@ div.sheet-feast {
|
||||
div.sheet-characters {
|
||||
div.sheet-sub-header,
|
||||
div.sheet-repeating-row {
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 2fr repeat(8, 1fr);
|
||||
grid-row-gap: 5%;
|
||||
}
|
||||
|
||||
@@ -650,12 +523,7 @@ div.sheet-feast {
|
||||
|
||||
/* FOOTER
|
||||
============================= */
|
||||
div.sheet-footer {
|
||||
margin-top: 5%;
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
@import './src/scss/footer';
|
||||
|
||||
/* SHOW & HIDE SHEETS
|
||||
============================= */
|
||||
@@ -710,169 +578,12 @@ $feasttypes: 'record', 'characters';
|
||||
|
||||
/* SWITCH
|
||||
============================= */
|
||||
.sheet-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
@import './src/scss/switch';
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.sheet-slider {
|
||||
-webkit-transition: .4s;
|
||||
background-color: #ccc;
|
||||
border-radius: 34px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
-webkit-transition: .4s;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
bottom: 4px;
|
||||
content: "";
|
||||
height: 16px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
transition: .4s;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
input:checked + & {
|
||||
background-color: black;
|
||||
|
||||
&:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus + & {
|
||||
box-shadow: 0 0 1px black;
|
||||
}
|
||||
}
|
||||
|
||||
/* ROLL TEMPLATE STYLE
|
||||
----------------------------- */
|
||||
.sheet-rolltemplate-rolls {
|
||||
div.sheet-template-container {
|
||||
border: 2px solid $dark;
|
||||
border-radius: 0.3em;
|
||||
box-shadow: inset 0px 0px 3px 1px $primary;
|
||||
text-align: center;
|
||||
font-family: 'fantasy';
|
||||
|
||||
/* DICE ROLL STYLES
|
||||
----------------------------- */
|
||||
.inlinerollresult.fullfail,
|
||||
.inlinerollresult.fullcrit,
|
||||
.inlinerollresult.importantroll {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.inlinerollresult.fullfail, .inlinerollresult.fullcrit {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.inlinerollresult {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 2em;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
|
||||
div.sheet-template-header {
|
||||
@extend div.sheet-header;
|
||||
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 2px solid $dark;
|
||||
padding: 3% 2%;
|
||||
text-transform: capitalize;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
div.sheet-template-body {
|
||||
background-color: $white;
|
||||
|
||||
div.sheet-template-row {
|
||||
&:nth-child(2n+0) { background-color: $light; }
|
||||
|
||||
span {
|
||||
&.sheet-inlinerollresult {
|
||||
color: $primary;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
cursor: help;
|
||||
padding: 0 3px 0 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.sheet-percent,
|
||||
&.sheet-template-desc {
|
||||
color: $primary;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-template-damage {
|
||||
background-color: #fff;
|
||||
padding: 3% 2%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.sheet-template-roll {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
|
||||
div.sheet-template-col {
|
||||
padding: 5%;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
border-left: 2px solid $dark;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
div.sheet-template-rollResult{
|
||||
padding: 5px;
|
||||
background-color:
|
||||
white;text-align:center;
|
||||
border:solid black;
|
||||
border-width: 0 2px 2px 2px;
|
||||
font-size:large;
|
||||
}
|
||||
}
|
||||
|
||||
@import './src/scss/rolltemplate';
|
||||
|
||||
/* REPEATING SECTIONS
|
||||
----------------------------- */
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
@@ -3,6 +3,6 @@
|
||||
"css": "pendragon.css",
|
||||
"authors": "Cassie Levett",
|
||||
"roll20userid": "557736",
|
||||
"preview": "preview.PNG",
|
||||
"preview": "preview.png",
|
||||
"instructions": "King Arthur Pendragon 5.2. Supports Book of the Entourage and Book of the Feasts."
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.entourage.grid
|
||||
.row.bottom-border.text-center
|
||||
.row.bottom-border.text-center.header
|
||||
h1.knight(data-i18n=`knight's entourage`)
|
||||
h1.woman(data-i18n=`lady's entourage`)
|
||||
.row.2column
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
.col.gold-left-border
|
||||
.family-history
|
||||
.row.gold-bottom-border
|
||||
.row.gold-bottom-border.header
|
||||
h1(data-i18n='family history and events')
|
||||
.row.grid.col-4
|
||||
each val in ['born', 'squired', 'knighted']
|
||||
@@ -79,7 +79,7 @@
|
||||
+textInput(val)
|
||||
|
||||
.character-history
|
||||
.row.gold-bottom-border
|
||||
.row.gold-bottom-border.header
|
||||
h1(data-i18n='character history')
|
||||
h1(data-i18n='glory')
|
||||
.row.events
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
.sheet-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sheet-font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -54,8 +53,8 @@
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-5column {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
div.sheet-6column {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
div.sheet-2autocolumn {
|
||||
@@ -81,12 +80,12 @@
|
||||
}
|
||||
|
||||
div.sheet-header {
|
||||
margin-top: 2%;
|
||||
border-top: 2px solid $primary;
|
||||
border-bottom: 2px solid $primary;
|
||||
text-align: center;
|
||||
background: #fefcea; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fefcea 0%, #ede4b4 50%, #fefcea 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, #fefcea 0%,#ede4b4 50%,#fefcea 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, #fefcea 0%,#ede4b4 50%,#fefcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#fefcea',GradientType=0 ); /* IE6-9 */
|
||||
background-color: $gold;
|
||||
background-image: url("https://www.transparenttextures.com/patterns/arches.png");
|
||||
}
|
||||
|
||||
span.sheet-display {
|
||||
@@ -98,4 +97,4 @@
|
||||
button {
|
||||
font-variant: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@500&display=swap');
|
||||
|
||||
button {
|
||||
text-overflow: ellipsis;
|
||||
font-family: serif;
|
||||
@@ -18,13 +20,6 @@ button {
|
||||
background-color: $primary !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:focus > h2,
|
||||
&:hover > h2,
|
||||
&:active > h2 {
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 2px $dark, 0 0 25px $secondary, 0 0 5px $primary
|
||||
}
|
||||
&[type="roll"],
|
||||
&[type="action"] {
|
||||
background-color: $white;
|
||||
@@ -38,6 +33,7 @@ button {
|
||||
}
|
||||
margin: 0.2em !important;
|
||||
padding: 0.1em !important;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,7 +49,7 @@ fieldset {
|
||||
h1 {
|
||||
color: $primary;
|
||||
text-transform: capitalize;
|
||||
font-family: serif;
|
||||
font-family: 'El Messiri', sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -71,6 +67,7 @@ h2 {
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
line-height: 36px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -107,6 +104,10 @@ input {
|
||||
label {
|
||||
margin-bottom: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
&:hover > input {
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@@ -140,4 +141,8 @@ textarea {
|
||||
|
||||
.charsheet {
|
||||
width: 825px;
|
||||
|
||||
div.sheet-row {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
.sheet-rolltemplate-rolls {
|
||||
div.sheet-template-container {
|
||||
border: 2px solid $dark;
|
||||
@@ -27,7 +28,7 @@
|
||||
|
||||
|
||||
div.sheet-template-header {
|
||||
@extend div.sheet-header;
|
||||
@extend div.sheet-header;
|
||||
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
@@ -35,6 +36,7 @@
|
||||
border-bottom: 2px solid $dark;
|
||||
padding: 3% 2%;
|
||||
text-transform: capitalize;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
div.sheet-template-body {
|
||||
@@ -66,6 +68,8 @@
|
||||
padding: 3% 2%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.sheet-template-roll {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -87,6 +91,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
div.sheet-template-rollResult{
|
||||
padding: 5px;
|
||||
background-color:
|
||||
white;text-align:center;
|
||||
border:solid black;
|
||||
border-width: 0 2px 2px 2px;
|
||||
font-size:large;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user