mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Cassie Levett
817909b313
* initial upload * save 4e start * saving * save color updates * remove limits * update the colors * save changes * begin refactoring names * fix attribute changes * save progress. commlinks added * move attrs to match hero lab * hide the other sheets until they are converted * fix translation keys * update drain, update roll template * make d6 explode * save css upates * move stuff around, fix primary weapons, add skills, add program buttons * add spec to programs * save shadowrun progress * fix primary bug * update force in npc buttons * remove unit tests * add to core ratings * save preview images
990 lines
22 KiB
SCSS
990 lines
22 KiB
SCSS
|
|
/* ABSTRACTS
|
|
============================= */
|
|
@import 'src/scss/abstracts/_variables';
|
|
@import 'src/scss/abstracts/_mixins';
|
|
|
|
/* BASE
|
|
============================= */
|
|
@import 'src/scss/base/_base';
|
|
@import 'src/scss/base/_placeholders';
|
|
@import 'src/scss/base/_generic';
|
|
@import 'src/scss/base/_typography';
|
|
|
|
/* SWITCHES
|
|
============================= */
|
|
@import 'src/scss/components/_switch';
|
|
@import 'src/scss/components/_tabs';
|
|
|
|
|
|
/***** TABS FOR SHEETS *****/
|
|
.sheet-settings-toggle,
|
|
.sheet-settings-flag {
|
|
input {
|
|
width: 3em;
|
|
}
|
|
|
|
input[type='checkbox'] + span {
|
|
background : transparent;
|
|
@extend .sheet-pictos;
|
|
font-size : 20px;
|
|
height : 20px;
|
|
text-align : center;
|
|
width : 20px;
|
|
}
|
|
}
|
|
|
|
/***************************************************************************************/
|
|
/************************** START OF THE PC SHEET *************************************/
|
|
/*************************************************************************************/
|
|
.sheet-pc {
|
|
margin-left : -1%;
|
|
padding-left : 0.5%;
|
|
|
|
button > h2:hover,
|
|
button > span:hover,
|
|
label > button[type='roll']:hover,
|
|
.sheet-repeat-box button[type='roll']:hover,
|
|
.sheet-con-track button[type='action']:hover,
|
|
button[data-i18n='default']:hover {
|
|
color : #fff;
|
|
text-shadow: 1px 1px 2px black, 0 0 25px $accent, 0 0 5px $primary;
|
|
}
|
|
|
|
h1 {
|
|
background-color: $primary;
|
|
font-size : 1em;
|
|
letter-spacing : 2px;
|
|
line-height : 20px;
|
|
padding-left : 5px;
|
|
padding-right : 5px;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
h2 {
|
|
font-size : 0.9em;
|
|
line-height: 25px;
|
|
text-transform: capitalize;
|
|
@extend %display-inline-grid;
|
|
}
|
|
|
|
h3 {
|
|
color : hsla(0, 0%, 20%, 0.59);
|
|
font-size: 0.8em;
|
|
text-transform: capitalize;
|
|
|
|
@extend %display-inline-grid;
|
|
}
|
|
|
|
hr { margin: 7px 0px -2px 0px; }
|
|
|
|
input {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.sheet-tabs {
|
|
@extend %display-inline-grid;
|
|
grid-template-columns: 1fr 5em 1fr 5em 2.5em 5em 5em 5em 5em 5em 5em 5em;
|
|
grid-column-gap: 0.25%;
|
|
padding: 0px 1% 3% 1%;
|
|
margin-top: 1%;
|
|
grid-row-gap: 10%;
|
|
|
|
button[type='roll'] {
|
|
grid-area: 2 / 5 / 2 / 5;
|
|
}
|
|
|
|
/***** PLAYER DATA INPUTS *****/
|
|
h1 {
|
|
background-color: transparent;
|
|
display: inline-block;
|
|
font-size : 1em;
|
|
grid-column: 6 / 8;
|
|
letter-spacing: 2px;
|
|
line-height : 20px;
|
|
margin-left: 5%;
|
|
text-align: right;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
h2 {
|
|
&[data-i18n-title='/w GM'] { grid-area: 2 / 1 / 2 / 1; }
|
|
&[data-i18n-title='wounds'] { grid-area: 2 / 3 / 2 / 4; }
|
|
&[data-i18n-title='modifiers'] { grid-area: 3 / 1 / 3 / 1; }
|
|
&[data-i18n-title='edge'] { grid-area: 3 / 3 / 3 / 4; }
|
|
}
|
|
|
|
@each $highlightButton in $tabs {
|
|
input[value*='#{$highlightButton}'] ~ button[name*='#{$highlightButton}'] {
|
|
@extend %highlight-button;
|
|
}
|
|
}
|
|
|
|
img {
|
|
grid-area: 1 / 1 / 2 / 6;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
&[data-i18n-title='character name'] > input[type='text'],
|
|
&[data-i18n-title='player name'] > input[type='text'] {
|
|
font-weight : bolder;
|
|
background-color: transparent;
|
|
border : none;
|
|
box-shadow : none;
|
|
border-bottom : 2px solid $graytrans;
|
|
border-radius : 0px;
|
|
height : 30px;
|
|
width : 100%;
|
|
grid-column: 4;
|
|
}
|
|
|
|
&[data-i18n-title='character name'] { grid-area: 1 / 8 / 1 / 14; }
|
|
&[data-i18n-title='player name'] { grid-area: 2 / 8 / 2 / 14; }
|
|
|
|
&[data-i18n-title='whisper rolls to gm']{ grid-area: 2 / 2 / 2 / 3; }
|
|
&[data-i18n-title='wounds'] { grid-area: 2 / 4 / 2 / 5;}
|
|
&[data-i18n-title='modifiers'] { grid-area: 3 / 2 / 3 / 3;}
|
|
&[data-i18n-title='edge'] { grid-area: 3 / 4 / 3 / 5;}
|
|
}
|
|
}
|
|
|
|
input.sheet-settings-toggle,
|
|
input.sheet-settings-flag,
|
|
input.sheet-collapse-flag,
|
|
input[type='radio'] {
|
|
@extend %toggleRelative;
|
|
|
|
& + span {
|
|
font-family: 'pictos';
|
|
}
|
|
|
|
&:checked + span {
|
|
color: $accent
|
|
}
|
|
}
|
|
|
|
select {
|
|
height: 1.8em;
|
|
padding: 0px;
|
|
color: $blacker;
|
|
}
|
|
|
|
div.sheet-core-info {
|
|
h2{ margin-right: 1%; }
|
|
|
|
input[type='text'], input[type='number'] {
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
&:placeholder-shown {
|
|
background-color: $graytrans;
|
|
}
|
|
}
|
|
}
|
|
|
|
input.sheet-display-flag { position: absolute; }
|
|
|
|
//used in magic & complex forms
|
|
select.sheet-attribute-select {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
/***** DECORATIVE BOX THAT ADDS THE RED OUTLINE ON PC SHEET *****/
|
|
div.sheet-border-box {
|
|
background-image: -moz-linear-gradient($accent, transparent), -moz-linear-gradient($accent, transparent);
|
|
background-image: -o-linear-gradient($accent, transparent), -o-linear-gradient($accent, transparent);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($accent), to(transparent));
|
|
background-image: -webkit-linear-gradient($accent, transparent);
|
|
background-image: linear-gradient($accent, transparent), linear-gradient($accent, transparent);
|
|
border-top : 2px solid $primary;
|
|
clear : both;
|
|
border-top-right-radius: 10px;
|
|
border-top-left-radius : 0px;
|
|
|
|
button[type='roll'] {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.sheet-pc-box {
|
|
border-top-right-radius: 10px;
|
|
border-top-left-radius : 0px;
|
|
}
|
|
}
|
|
|
|
/***** REPEATING CONTAINERS *****/
|
|
div.sheet-repeating-container {
|
|
div.repitem {
|
|
display: inline-grid;
|
|
padding: 1% 0.5%;
|
|
margin-bottom: 0px;
|
|
@extend %gridGap;
|
|
@extend %borderBottom;
|
|
|
|
button[type='roll'] {
|
|
text-align: left;
|
|
}
|
|
|
|
input {
|
|
&:nth-of-type(1n+2) { text-align: center; }
|
|
|
|
&[type='text'],
|
|
&[type='number'] {
|
|
@extend %borderBottom;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
label {
|
|
padding-right: 0px;
|
|
|
|
input[name='attr_name'],
|
|
input[name='attr_weapon'],
|
|
input[name='attr_quality'] {
|
|
text-align: left;
|
|
}
|
|
|
|
&[data-i18n-title='modifier'] {
|
|
width: 3em;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
background-color: $ccc;
|
|
border-left: 2px solid $gray;
|
|
@extend %gridGap;
|
|
padding: 2% 1%;
|
|
width: 100%;
|
|
|
|
select { text-transform: capitalize; }
|
|
}
|
|
|
|
div.sheet-collapse { padding-left: 5%; }
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
width: 100%;
|
|
|
|
input[type='number'] { text-align: center; }
|
|
}
|
|
|
|
/***** STATIC *****/
|
|
div.sheet-static {
|
|
margin-right: 0.5%;
|
|
|
|
div.sheet-border-box,
|
|
div.sheet-border-box .sheet-pc-box {
|
|
border-top-right-radius: 0px;
|
|
border-top-left-radius : 10px;
|
|
}
|
|
}
|
|
|
|
|
|
/***** CORE *****/
|
|
div.sheet-core {
|
|
div.sheet-armor-buttons {
|
|
display : inline-block;
|
|
font-size : 1.5em;
|
|
line-height: 20px;
|
|
margin-left: 1%;
|
|
width : 35%;
|
|
|
|
button {
|
|
&[type='roll'] { margin-right: -5px; }
|
|
&[name='roll_defense'] {
|
|
background-color: $gray;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
span { font-size : 1em; }
|
|
}
|
|
|
|
/***** QUALITIES *****/
|
|
div.sheet-quality-box {
|
|
div.sheet-htab input[type='radio'] {
|
|
margin-right: -100px;
|
|
width : 100px;
|
|
}
|
|
|
|
div.sheet-header:nth-of-type(2) .sheet-htab input[type='radio'] {
|
|
margin-right: -150px;
|
|
width : 150px;
|
|
}
|
|
|
|
div.sheet-quality {
|
|
$qualityGrid: 1fr 3em 1.5em 1em 1em;
|
|
|
|
h2:nth-of-type(2) { text-align: center; }
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
grid-template-columns: $qualityGrid;
|
|
@extend %gridGap;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $qualityGrid;
|
|
@include repeatingInformation(6, false);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $qualityGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-martial {
|
|
$martialGrid: 2fr 1fr 1.5em 1em 1em;
|
|
|
|
h2:nth-of-type(2) { text-align: center; }
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
grid-template-columns: $martialGrid;
|
|
@extend %gridGap;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $martialGrid;
|
|
@include repeatingInformation(6, false);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $martialGrid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/***** SKILLS *****/
|
|
div.sheet-skill-box {
|
|
$skillGrid: 1fr 3.5em 5em 1em 1em;
|
|
|
|
h2:nth-of-type(1n+2) {
|
|
text-align: center;
|
|
}
|
|
|
|
label {
|
|
display : inline-block;
|
|
font-size : 0.8em;
|
|
text-transform: capitalize;
|
|
|
|
&[data-i18n-title='ratingmodifier'] {
|
|
grid-area: 1 / 3 / 1 / 7;
|
|
width: 100%;
|
|
|
|
input[type='number'] {
|
|
width: 3em;
|
|
}
|
|
}
|
|
|
|
&[data-i18n-title='specialization'] { grid-area: 3 / 1 / 3 / 7; }
|
|
&[data-i18n-title='notes'], textarea { grid-area: 4 / 1 / 4 / 7; }
|
|
|
|
& > input {
|
|
@extend %borderBottom;
|
|
text-align: left;
|
|
border-radius: 0px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.sheet-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1.5fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input[name='attr_specialization'][value=''] ~ div.sheet-buttons {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
input[name='attr_skill'] { @extend %borderBottom; }
|
|
|
|
input[name='attr_rating_modifier'] { width: 3.5em; }
|
|
|
|
input[name='attr_specialization'][value=' '] ~ div.sheet-buttons button[name*='specialization'],
|
|
input[name='attr_specialization'][value=''] ~ div.sheet-buttons button[name*='specialization'] { @extend %display-none; }
|
|
|
|
div.sheet-row-long {
|
|
grid-template-columns: $skillGrid;
|
|
padding: 1% 0.5%;
|
|
width: 100%;
|
|
|
|
@extend %display-inline-grid;
|
|
@extend %gridGap;
|
|
|
|
h3:nth-of-type(1n+2) { text-align: center; }
|
|
}
|
|
|
|
option.sheet-option-headers {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
option.sheet-option-groups {
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $skillGrid;
|
|
|
|
@include repeatingInformation(6, false);
|
|
|
|
input[name='attr_damage'],
|
|
input[name='attr_dicepool_modifier'] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $skillGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** ARMS ****/
|
|
div.sheet-arms {
|
|
div.sheet-headers {
|
|
display: grid;
|
|
@extend %gridGap;
|
|
|
|
h2:nth-of-type(1n+2) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
h3 { color: $blacker; }
|
|
|
|
input {
|
|
&:nth-of-type(1n+2) { text-align: center; }
|
|
|
|
&.sheet-flag-primary[value='primary'] + button,
|
|
&.sheet-flag-primary[value='primary'] + div.sheet-primary {
|
|
background-color: $primary;
|
|
border-bottom: 2px solid $blacker;
|
|
border-right: 0;
|
|
}
|
|
|
|
|
|
&.sheet-flag-primary[value='primary'] + button:hover {
|
|
background-color: $accent;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
div.sheet-primary {
|
|
padding: 0.5% 1%;
|
|
}
|
|
|
|
h2,
|
|
label.sheet-protections {
|
|
width: 11%;
|
|
}
|
|
|
|
h2:nth-of-type(1n+2),
|
|
label.sheet-protections:nth-of-type(1n+2) {
|
|
margin-left: 2%;
|
|
}
|
|
|
|
label.sheet-protections > input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.sheet-weapons {
|
|
div.sheet-headers {
|
|
grid-template-columns: 1fr 4em 3em 3em 3em 3em 1em 1em;
|
|
}
|
|
|
|
div.repitem {
|
|
$weaponsGrid: 1fr 4em 3em 3em 3em 3em 1em 1em;
|
|
grid-template-columns: $weaponsGrid;
|
|
@include repeatingInformation(9, false);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 9;
|
|
grid-template-columns: $weaponsGrid;
|
|
}
|
|
}
|
|
|
|
div.sheet-weapon-range,
|
|
div.sheet-weapon-melee {
|
|
width: 100%;
|
|
div.sheet-row {
|
|
grid-column: 1 / 9;
|
|
|
|
label[data-i18n-title="modeoptions"],
|
|
label[data-i18n-title="range"]{
|
|
width: 25%;
|
|
}
|
|
|
|
input[type='number'] {width: 3em;}
|
|
|
|
select {width: 30%;}
|
|
};
|
|
|
|
div.sheet-exotic-warning { display: none; }
|
|
|
|
input[value='0'] + div.sheet-exotic-warning { display: block; }
|
|
}
|
|
}
|
|
|
|
div.sheet-armor {
|
|
$armorGrid: 1fr 5em 5em 1em 1em;
|
|
div.sheet-headers { grid-template-columns:$armorGrid; }
|
|
|
|
div.repitem {
|
|
grid-template-columns: $armorGrid;
|
|
@include repeatingInformation(6, false);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $armorGrid;
|
|
|
|
div.sheet-row {
|
|
grid-column: 1 / 6;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/*** AUGS ****/
|
|
div.sheet-augs {
|
|
$augsGrid: 1fr 5em 5em 1em 1em;;
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
grid-template-columns:$augsGrid;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $augsGrid;
|
|
@include repeatingInformation(6, true);
|
|
|
|
input[name='attr_augementation'] { text-align: left; }
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $augsGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** GEAR ****/
|
|
div.sheet-gear {
|
|
$gearGrid: 1fr 5em 5em 1em 1em;;
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
grid-template-columns:$gearGrid;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $gearGrid;
|
|
@include repeatingInformation(6, true);
|
|
|
|
input[name='attr_item'] { text-align: left; }
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
grid-template-columns: $gearGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/***** MAGIC *****/
|
|
div.sheet-magic {
|
|
$magicGrid: 30% 1.5fr 1.5fr 2fr 2em 1em 1em;
|
|
|
|
input.sheet-magic-toggle[value='rituals'] ~ .sheet-headers h2:nth-of-type(1n+2) {
|
|
@extend %display-none;
|
|
}
|
|
|
|
h2:nth-of-type(1n+2) { text-align: center; }
|
|
h3 { color: $blacker; }
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
@extend %gridGap;
|
|
grid-template-columns:$magicGrid;
|
|
|
|
h3:nth-of-type(1n+2) { text-align: center; }
|
|
}
|
|
|
|
|
|
/***** SPELLS & PREPARTATIONS *****/
|
|
div.sheet-spellsForumlas {
|
|
div.repitem {
|
|
grid-template-columns: $magicGrid;
|
|
|
|
@include repeatingInformation(8, false);
|
|
|
|
input[name='attr_damage'],
|
|
input[name='attr_dicepool_modifier'] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
select[name='attr_category'] { grid-row: 2; }
|
|
|
|
div.sheet-row { grid-column: 1 / 6; }
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 8;
|
|
grid-template-columns: $magicGrid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/***** RITUALS *****/
|
|
div.sheet-magic-rituals {
|
|
$ritualsGrid: 1fr 1em 1em;
|
|
|
|
@include repeatingInformation(4, false);
|
|
|
|
div.repitem {
|
|
grid-template-columns: $ritualsGrid;
|
|
|
|
label {
|
|
&[data-i18n-title='name'] { grid-column: 1 / 4; }
|
|
}
|
|
|
|
div.sheet-row { grid-column: 1 / 4; }
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: $ritualsGrid;
|
|
grid-column: 1 / 4;
|
|
}
|
|
}
|
|
|
|
div.sheet-magic-preps, div.sheet-magic-spells {
|
|
textarea { width: 93%; }
|
|
}
|
|
|
|
/***** PREPARATIONS *****/
|
|
div.sheet-magic-preps {
|
|
/* READIED PREPARATIONS */
|
|
div.sheet-prepared-preparations {
|
|
$preparationsGrid: 40% 1fr 1fr 2fr 1em 1em;
|
|
|
|
div.sheet-headers {
|
|
grid-template-columns:$preparationsGrid ;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $preparationsGrid ;
|
|
|
|
@include repeatingInformation(7, false);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 7;
|
|
grid-template-columns: $preparationsGrid;
|
|
|
|
select { grid-column: 4 / 7; }
|
|
|
|
textarea { width: 100%; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/***** ADEPT POWERS *****/
|
|
div.sheet-powers {
|
|
$powersGrid: 1fr 3em 1em 1em;;
|
|
|
|
div.sheet-headers {
|
|
grid-template-columns:$powersGrid;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $powersGrid;
|
|
@include repeatingInformation(5, true);
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 5;
|
|
grid-template-columns: $powersGrid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** MATRIX ****/
|
|
div.sheet-matrix {
|
|
h3 { color: $blacker; }
|
|
|
|
div.sheet-commlinks {
|
|
$commlinkGrid: auto 1fr auto 1fr;
|
|
|
|
div.repitem{
|
|
grid-template-columns: $commlinkGrid;
|
|
@include repeatingInformation(6, false);
|
|
|
|
input:not([value='']) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sheet-con-hex {
|
|
grid-column: 1 / 5;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-programs {
|
|
$programGrid: 1em 1fr 1.5em 1em;
|
|
|
|
div.repitem {
|
|
grid-template-columns: $programGrid;
|
|
@extend %borderBottom;
|
|
@include repeatingInformation(6, false);
|
|
|
|
input[name='attr_program_on'] {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
|
|
&:checked + span {
|
|
color: $accent;
|
|
font-weight: bolder;
|
|
|
|
& + span {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
|
|
& + span {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 6;
|
|
|
|
div.sheet-col {
|
|
&:nth-of-type(1) {
|
|
grid-column: 1 / 4;
|
|
|
|
& > label {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
grid-column: 4 / 6;
|
|
text-align: center;
|
|
|
|
& > label {
|
|
width: 3em;
|
|
}
|
|
}
|
|
|
|
//Select row
|
|
&:nth-of-type(3) {
|
|
grid-area: 2 / 1 / 2 / 3;
|
|
}
|
|
|
|
&:nth-of-type(4) {
|
|
grid-area: 2 / 3 / 2 / 4;
|
|
}
|
|
|
|
&:nth-of-type(5) {
|
|
grid-column: 4 / 6;
|
|
text-align: center;
|
|
|
|
& > label {
|
|
width: 3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type='text'] {
|
|
grid-column: 1 / 4;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-complex-forms {
|
|
$complexFormsGrid: 30% 1fr 1fr 4em 1em 1em;
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
@extend %gridGap;
|
|
grid-template-columns: $complexFormsGrid;
|
|
|
|
h2:nth-of-type(1n+2) { text-align: center; }
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $complexFormsGrid;
|
|
|
|
@include repeatingInformation(7, false);
|
|
|
|
div.sheet-row {
|
|
grid-column: 1 / 7;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 7;
|
|
grid-template-columns: $complexFormsGrid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** SOCIAL ****/
|
|
div.sheet-social {
|
|
|
|
div.sheet-lifestyle {
|
|
$lifestyleGrid: 1fr 1.5em 1em 1em;
|
|
div.repitem {
|
|
grid-template-columns: $lifestyleGrid;
|
|
@include repeatingInformation(5, false);
|
|
|
|
div.sheet-collapse {
|
|
padding-left: 2%;
|
|
|
|
h3 {
|
|
margin-right: 1%;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 5;
|
|
padding: 1% 2% 5% 2%;
|
|
min-height: 300px;
|
|
|
|
textarea {
|
|
height: 45px;
|
|
min-height: 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-contacts {
|
|
$contactsGrid: 1fr 4em 5.5em 4em 1.5em 1em 1em;
|
|
|
|
div.sheet-headers {
|
|
display: grid;
|
|
grid-template-columns: $contactsGrid;
|
|
grid-column-gap: 1%;
|
|
width: 100%;
|
|
}
|
|
|
|
div.repitem {
|
|
grid-template-columns: $contactsGrid;
|
|
@include repeatingInformation(8, false);
|
|
|
|
|
|
div.sheet-settings {
|
|
grid-column: 1 / 8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*** Vehicle ****/
|
|
div.sheet-vehicle {
|
|
|
|
}
|
|
|
|
/***** SECONDARY HEADERS LIKE ON SKILLS *****/
|
|
div.sheet-htab {
|
|
margin-right: -47px;
|
|
|
|
input {
|
|
&[type='radio'] {
|
|
margin-right: -80px;
|
|
top : 4px;
|
|
width : 80px;
|
|
|
|
& + h1 {
|
|
color: #9a9a9a;
|
|
}
|
|
|
|
&:hover ~ h1,
|
|
&:checked ~ h1 {
|
|
color: $accent
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@import 'src/scss/_pc';
|
|
|
|
|
|
/******************************************************************************************/
|
|
/**************************** START OF THE NPC SHEET *************************************/
|
|
/****************************************************************************************/
|
|
@import 'src/scss/_npc';
|
|
|
|
/**************************************************************************/
|
|
/***************** PC & NPC SHEET SHOW & HIDE SETTINGS *******************/
|
|
/************************************************************************/
|
|
|
|
/* DISPLAY SETTINGS
|
|
============================= */
|
|
@import 'src/scss/_hide';
|
|
|
|
|
|
/*****************************************************************************************/
|
|
/**************************************** FOOTER ****************************************/
|
|
/***************************************************************************************/
|
|
/**** Footer ****/
|
|
div.sheet-footer {
|
|
border : none;
|
|
font-size : 0.55em;
|
|
line-height: 15px;
|
|
margin-top : 15px;
|
|
text-align : left;
|
|
width : 700px;
|
|
|
|
div {
|
|
display: inline-block;
|
|
width: 90%;
|
|
}
|
|
|
|
img {
|
|
float: right;
|
|
vertical-align: top;
|
|
width: 5%;
|
|
}
|
|
}
|
|
|
|
/********************************************************************************************************/
|
|
/**************************************** REPEATING SECTIONS *******************************************/
|
|
/********************************************************************************************************/
|
|
@import 'src/scss/_repeatingsection';
|
|
|
|
/********************************************************************************************************/
|
|
/**************************************** Roll template *******************************************/
|
|
/********************************************************************************************************/
|
|
|
|
@import 'src/scss/_rolltemplate';
|
|
|
|
/********************************************************************************************************/
|
|
/******************************* FireFox *******************************************/
|
|
/******************************************************************************************************/
|
|
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;}
|
|
|
|
input[type=number] {
|
|
-moz-appearance:textfield;}
|
|
|
|
|
|
/********************************************************************************************/
|
|
/***************** French Adjustments ********************************/
|
|
/*******************************************************************************************/
|
|
@import 'src/scss/layouts/_lang-fr'; |