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
424 lines
7.7 KiB
SCSS
424 lines
7.7 KiB
SCSS
.sheet-npc {
|
|
border-radius : 3px;
|
|
min-height : 800px;
|
|
padding : 10px 10px;
|
|
width : 720px;
|
|
|
|
button {
|
|
background: #333;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
border-color: $secondary;
|
|
color : $white;
|
|
font-weight : bold;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
line-height: unset;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
h3 { font-size: 0.85em; }
|
|
|
|
input {
|
|
&[type='radio'] { opacity: 1; }
|
|
|
|
&[type='text']:placeholder-shown,
|
|
&[type='number']:placeholder-shown {
|
|
border: 1px dotted $accent
|
|
}
|
|
|
|
&.sheet-toggle:checked + span { color: $accent }
|
|
}
|
|
|
|
textarea, select {
|
|
color : $white;
|
|
background-color: #555;
|
|
}
|
|
|
|
div.sheet-tabs {
|
|
@extend %display-inline-grid;
|
|
grid-template-columns: 2.5em 1fr 4em 1fr 4em 1fr 4em 1fr 4em;
|
|
grid-row-gap: 10%;
|
|
|
|
button[type='roll'] {
|
|
color: $blackish;
|
|
grid-area: 2 / 1 / 2 / 2;
|
|
}
|
|
|
|
img {
|
|
grid-area: 1 / 1 / 2 / 4;
|
|
height: 100%;
|
|
width: 100%
|
|
}
|
|
|
|
.sheet-switch {
|
|
input[type='checkbox'] + span {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
h2, label { grid-row: 2;}
|
|
select { grid-column: 8 / 8;}
|
|
|
|
input[name='attr_stats_toggle'],
|
|
input[name='attr_stats_toggle'] + span.sheet-pictos {
|
|
grid-area: 1 / 9 / 1 / 9;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
input[name='attr_stats_toggle']:checked + span { color: $accent }
|
|
span.sheet-pictos {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
div.sheet-rows {
|
|
margin-bottom: 1%;
|
|
width: 100%;
|
|
|
|
button {
|
|
font-size: 1.1em;
|
|
text-align: left;
|
|
}
|
|
|
|
h2 {
|
|
display: inline;
|
|
font-size: 1.1em;
|
|
line-height: unset;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h3 { display: inline; }
|
|
|
|
input[type='number'] { width: 3em; }
|
|
|
|
span.sheet-tiny-span { margin: 0px 1%; }
|
|
}
|
|
|
|
/*:+:+:+: REPEATING SECTIONS :+:+:+:*/
|
|
div.sheet-repeating {
|
|
button { margin: 0px; }
|
|
|
|
h1 {display: inline;}
|
|
h2 {
|
|
font-variant: small-caps;
|
|
text-align : center;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
input[type='number'], input[type='text'] { width: 100%; }
|
|
|
|
input[name='attr_flag'] {
|
|
@extend %settingsCheckboxes;
|
|
@extend %toggleCheckbox;
|
|
}
|
|
|
|
div.repitem {
|
|
&:hover > input[name='attr_flag'] + span,
|
|
&:hover > input[name='attr_program_on'] + span {
|
|
opacity: 1;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
min-width: 700px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: NPC ATTRIBUTES :+:+:+:*/
|
|
div.sheet-attribute {
|
|
border-bottom: 1px solid $white;
|
|
border-top : 1px solid $white;
|
|
grid-row-gap: 5%;
|
|
margin : 2% 0px;
|
|
padding: 1% 1% 3% 1%;
|
|
width : 100%;
|
|
|
|
input[type='number'] {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
label {
|
|
text-align: center;
|
|
|
|
&[data-i18n-title='modifier']{ input[type='number'] {width: 65%;} }
|
|
&[data-i18n-title='modifier']:before {content: '(';}
|
|
&[data-i18n-title='modifier']:after {content: ')';}
|
|
}
|
|
|
|
h1 {
|
|
font-weight: normal;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
button {
|
|
grid-row: 1;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
span {
|
|
font-size: 1.25em;
|
|
grid-row: 2;
|
|
text-align: center;
|
|
}
|
|
|
|
span + label {grid-row: 3;}
|
|
label[data-i18n-title='modifier']{grid-row: 4;}
|
|
}
|
|
|
|
/*:+:+:+: NPC BODY :+:+:+:*/
|
|
div.sheet-mid {
|
|
@extend %display-inline-grid;
|
|
grid-template-columns: 52% 30% 1fr;
|
|
width: 100%;
|
|
|
|
div.sheet-column {
|
|
@extend %display-inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
span[name='attr_physical_limit']:after,
|
|
span[name='attr_mental_limit']:after {
|
|
content: ',';
|
|
}
|
|
}
|
|
|
|
|
|
/*:+:+:+: NPC TEXT BOXES AND REPEATING SECTIONS :+:+:+:*/
|
|
div.sheet-end {
|
|
div.sheet-rows, div.sheet-textrow { width: 100% }
|
|
|
|
/*:+:+:+: TEXT AREAS :+:+:+:*/
|
|
div.sheet-textrow {
|
|
grid-column: 1 / 4;
|
|
|
|
h1 {
|
|
display: inline;
|
|
line-height: unset;
|
|
margin-right: 1%;
|
|
}
|
|
|
|
label {
|
|
width: 100%;
|
|
|
|
&[data-i18n-title='initiate'],
|
|
&[data-i18n-title='submersion'] {
|
|
width: 4em;
|
|
|
|
& input { width: 100%; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: REPEATING SECTIONS :+:+:+:*/
|
|
div.sheet-repeating { grid-column: 1 / 4; }
|
|
|
|
/*:+:+:+: NPC INLINE REPEAITNG SECTIONS SUCH AS SKILLS :+:+:+:*/
|
|
div.sheet-inline-repeating {
|
|
div.repitem {
|
|
span[name*='attr_display_rating']:after { content: ','; }
|
|
}
|
|
|
|
.sheet-full-row {
|
|
grid-column: 1 / 6;
|
|
}
|
|
|
|
div.repcontainer {
|
|
display: inline;
|
|
max-width: 500px;
|
|
|
|
.repitem,
|
|
.repcontrol {
|
|
display : inline-block;
|
|
vertical-align: top;
|
|
margin-bottom : 1%;
|
|
margin-right: 1%;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 2fr 8em 8em 1fr 1fr;
|
|
grid-column-gap: 1%;
|
|
grid-row-gap: 0.5%;
|
|
|
|
h2.sheet-full-row {
|
|
text-align: left;
|
|
}
|
|
|
|
label.sheet-full-row {
|
|
input[type='text']{ text-align: left; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: WEAPONS :+:+:+:*/
|
|
div.sheet-weapons {
|
|
input[name='attr_weapon_range'][value='range'] ~ div.sheet-settings {
|
|
grid-template-columns: 5em 3em 2fr 2fr 3em 3em 3em 1fr 3em 3em;
|
|
|
|
label[data-i18n-title='notes'] { grid-column: 1 / 10 }
|
|
}
|
|
|
|
input[name='attr_weapon_range'][value='melee'] ~ div.sheet-settings {
|
|
grid-template-columns: 5em 3em 2fr 2fr 3em 3em 3em 3em;
|
|
|
|
label[data-i18n-title='notes'] { grid-column: 1 / 9 }
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-column-gap: 0.2%;
|
|
}
|
|
|
|
span[name='attr_weapon_dice'] {
|
|
@extend %parantheseNumbers;
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: SPELLS :+:+:+:*/
|
|
div.sheet-spells {
|
|
div.sheet-settings {
|
|
grid-column-gap: 0.2%;
|
|
grid-template-columns: 7em 3em 1fr 5em 5em 5em 3em 5em 3em;
|
|
}
|
|
|
|
span[name='attr_dice'] {
|
|
@extend %parantheseNumbers;
|
|
}
|
|
|
|
label[data-i18n-title='notes'] { grid-column: 1 / 10; }
|
|
}
|
|
|
|
/*:+:+:+: COMPLEX FORMS :+:+:+:*/
|
|
div.sheet-forms {
|
|
div.sheet-settings {
|
|
grid-column-gap: 0.2%;
|
|
grid-template-columns: 3em 1fr 7em 8em 3em;
|
|
}
|
|
|
|
span[name='attr_form_dice'] {
|
|
margin-left: 3%;
|
|
@extend %parantheseNumbers;
|
|
}
|
|
|
|
label[data-i18n-title='notes'] { grid-column: 1 / 6; }
|
|
}
|
|
|
|
/*:+:+:+: IC :+:+:+:*/
|
|
div.sheet-ic {
|
|
div.sheet-settings {
|
|
grid-column-gap: 0.2%;
|
|
grid-template-columns: 1fr 8em 8em 8em;
|
|
}
|
|
|
|
span[name='attr_software_dice'] {
|
|
margin-left: 3%;
|
|
@extend %parantheseNumbers;
|
|
}
|
|
|
|
label[data-i18n-title='notes'] { grid-column: 1 / 5; }
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: NPC MATRIX :+:+:+:*/
|
|
div.sheet-matrix {width: 100%;}
|
|
|
|
div.sheet-matrix-device {
|
|
margin-bottom: 5%;
|
|
|
|
div.sheet-rows {
|
|
display: inline-grid;
|
|
grid-template-columns: 12em 45% 10em 1fr;
|
|
grid-row-gap: 5%;
|
|
|
|
&:first-child { margin-bottom: 4%; }
|
|
}
|
|
|
|
label {
|
|
width: 100%;
|
|
|
|
input[type='text'] {
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
&.sheet-round > input[type='number'] {
|
|
border-radius: 25px 25px;
|
|
height: 25px;
|
|
margin-left: 25%;
|
|
width: 25px;
|
|
}
|
|
}
|
|
|
|
div.sheet-matrix-bubble {
|
|
background-color: transparent;
|
|
grid-column: 2 / 4;
|
|
height: 15px;
|
|
margin-left: 10%;
|
|
|
|
/*:+:+:+: NPC MATRIX BUBBLES :+:+:+:*/
|
|
input[type='radio'] {
|
|
height: 25px;
|
|
width : 20px;
|
|
left : 0px;
|
|
top: -115%;
|
|
|
|
& + span {
|
|
border-radius: 5px;
|
|
height : 25px;
|
|
left : 5px;
|
|
width : 20px;
|
|
top: -60%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*:+:+:+: NPC PROGRAMS :+:+:+:*/
|
|
div.repcontainer {
|
|
grid-column: 1 / 6;
|
|
|
|
h2[data-i18n='notes'] { grid-row: 3; }
|
|
label[data-i18n-title='notes'] { grid-row: 4; }
|
|
|
|
|
|
div.repitem {
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
button > span, span { opacity: 0.2; }
|
|
|
|
input.sheet-toggle,
|
|
span.sheet-pictos {
|
|
position: absolute;
|
|
top: 2%;
|
|
}
|
|
|
|
input[name='attr_program_on'] {
|
|
left: 2%;
|
|
|
|
& + span { left: 2.5%;}
|
|
|
|
&:checked ~ button > span,
|
|
&:checked ~ span { opacity: 1; }
|
|
}
|
|
|
|
|
|
button[type="roll"] { margin-left: 5% !important; }
|
|
}
|
|
}
|
|
}
|
|
}
|