Cassie Levett
87cac1e087
* Make the logo smaller * Set theme jekyll-theme-time-machine * intitial commit * delta green wip * scss working again * pug setup, rolltemplate broken * personal data done, saving progress * stat-pysch data wip * stats wip, saving * refactoed pug stats * statistical data finished * wip save * delta green * wip * pysch done * save skills start * skills nearly finished * 2nd page wip * pc wireframe finished * finished pc, add translations * saving progress, starting sheetworkers * remove unncessary divs * save progress * small changes * Saving Hit Points Promise * stat sheet workers done * update add skill & attr rolls * added buttons * fixed placeholders * saving small changes * remove setting, npc/pc as select * npc in progress * wip * change whisper to a switch * npc near done, skills needed * small change * finish NPC * fix alignment * rename folder * version 1 ready to go * Delete deltagreen.css.map * remove unncessary file
331 lines
8.2 KiB
SCSS
331 lines
8.2 KiB
SCSS
// FUNCTIONS
|
|
//=============================
|
|
@import 'src/scss/_functions';
|
|
|
|
// MIXINS
|
|
//=============================
|
|
@import 'src/scss/_mixins';
|
|
|
|
// VARIABLES
|
|
//=============================
|
|
@import 'src/scss/_variables';
|
|
|
|
// GLOBAL SETTINGS
|
|
//=============================
|
|
@import 'src/scss/_globals';
|
|
|
|
// REPEATING SECTIONS
|
|
//=============================
|
|
@import 'src/scss/_repcontrol';
|
|
|
|
// ROLL TEMPLATE
|
|
//=============================
|
|
@import 'src/scss/_rolltemplate';
|
|
|
|
/* HIDE DIFFERENT SHEET TYPES BY DEFAULT
|
|
============================= */
|
|
div.sheet-npc {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-type[value='npc'] ~ div.sheet-npc,
|
|
div.sheet-pc {
|
|
display: grid;
|
|
}
|
|
|
|
/* HIDE PC SECTIONS NOT NEEDED ON NPC PAGE
|
|
----------------------------- */
|
|
$pcSections: 'personal-data', 'statistical-data', 'pyschological-data', 'applicable-skill-sets', 'injuries', 'remarks', 'authorizing-officer', 'section-bottom-decor', 'equipment';
|
|
@each $section in $pcSections {
|
|
input.sheet-type[value='npc'] ~ div.sheet-pc div.sheet-#{$section} {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* NPC PAGE IS NOT AS WIDE A PC
|
|
----------------------------- */
|
|
div.sheet-npc,
|
|
input.sheet-type[value='npc'] ~ div.sheet-tabs {
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* SWITCHES
|
|
============================= */
|
|
@import 'src/scss/_switch';
|
|
|
|
|
|
/* HIGHLIGHT BUTTONS
|
|
============================= */
|
|
input.sheet-display_string[value*='settings'] ~ div.sheet-tabs button[name='act_toggle_settings'] {
|
|
@include back-color($gray);
|
|
box-shadow: inset 0px 0px 3px 1px $accent1;
|
|
color : $accent1;
|
|
}
|
|
|
|
/* GRID
|
|
============================= */
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
//grid-column-gap: 0.2em;
|
|
//grid-row-gap : 0.2em;
|
|
}
|
|
|
|
div.sheet-grid-tab-inputs {
|
|
@for $i from 1 through 3 {
|
|
label:nth-of-type(#{$i}) {
|
|
@include grid-area(2, 2, $i, $i);
|
|
}
|
|
span:nth-of-type(#{$i}) {
|
|
@include grid-area(1, 1, $i, $i);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TABS & LOGO SECTION
|
|
============================= */
|
|
div.sheet-tabs {
|
|
grid-template-columns: 8em 1fr 6em;
|
|
margin-bottom: 0.5%;
|
|
@include back-color($maincolor);
|
|
|
|
label > input {
|
|
width: 100%;
|
|
}
|
|
|
|
label.sheet-switch {
|
|
grid-column: 1;
|
|
margin-left: 5%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
img {
|
|
@include grid-area(1, 2, 3, 2);
|
|
height: 99%;
|
|
}
|
|
|
|
button[name='attr_gm_toggle'] {
|
|
@include grid-area(1, 1, 1, 1);
|
|
}
|
|
|
|
button[name='act_toggle_character'] {
|
|
@include grid-area(1, 3, 1, 3);
|
|
}
|
|
|
|
button[name='act_toggle_npc'] {
|
|
@include grid-area(2, 3, 2, 3);
|
|
}
|
|
|
|
select {
|
|
background-color: $maincolor;
|
|
border: none;
|
|
color: $accent1;
|
|
font-weight: bold;
|
|
width: 4em;
|
|
}
|
|
|
|
span {
|
|
color: $accent1;
|
|
font-weight: bold;
|
|
|
|
&:nth-of-type(1) {
|
|
padding: 5% 1% 0px 5%;
|
|
@include grid-area(1, 1, 1, 1);
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
padding: 5% 1% 0px 5%;
|
|
@include grid-area(1, 3, 1, 3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* GENERIC CLASSES
|
|
============================= */
|
|
.sheet-border { border: 0.15em solid $maincolor; }
|
|
.sheet-border-bottom { border-bottom: 0.15em solid $maincolor; }
|
|
.sheet-center { @include text-align(center); }
|
|
.sheet-header-body { grid-template-columns: 3em 1fr; }
|
|
.sheet-italic {font-style: italic;}
|
|
.sheet-margin-left {margin-left: 2%; }
|
|
.sheet-pictos { font-family: 'pictos'; }
|
|
.sheet-none { display: none; }
|
|
.sheet-text-align-left { text-align: left; }
|
|
.sheet-dicefontd10 {
|
|
color: $maincolor;
|
|
font-family: 'dicefontd10';
|
|
}
|
|
|
|
h2.sheet-aligned-left,
|
|
h3.sheet-aligned-left {
|
|
margin-left: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
/* STYLED CHECKBOXES
|
|
============================= */
|
|
label.sheet-styled-checkbox {
|
|
input[type='checkbox'] {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
}
|
|
|
|
/* NPC SHEET
|
|
============================= */
|
|
div.sheet-npc {
|
|
input[type='text'],
|
|
input[type='number'] {
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-section-header {
|
|
input[name='attr_name'] {
|
|
color: $maincolor;
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
div.sheet-section-body {
|
|
grid-template-columns: 4em 1fr 4em 1fr 4em 1fr 4em 1fr 4em 1fr 4em 1fr;
|
|
margin-left: 2%;
|
|
max-width: 98%;
|
|
|
|
h1 { font-size: 1em; }
|
|
|
|
h2 {
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button > h1 {
|
|
font-size: 0.8em;
|
|
line-height: 1.8em;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $accent1;
|
|
}
|
|
}
|
|
|
|
input {
|
|
height: 100%;
|
|
|
|
&:placeholder-shown {
|
|
border: 0.1em dashed $accent3;
|
|
}
|
|
|
|
&[type='text'] {
|
|
text-align: left;
|
|
margin-left: 1%;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
grid-column: 1 / 13;
|
|
min-height: 4em;
|
|
}
|
|
|
|
div.sheet-repeating-container,
|
|
label.sheet-row {
|
|
grid-column: 1 / 13;
|
|
}
|
|
|
|
/* HIT POINTS & WILLPOWER POINTS
|
|
----------------------------- */
|
|
h1[data-i18n='HP'] { @include grid-area(3, 1, 3, 1); }
|
|
label[data-i18n-title='enter hit points']{ @include grid-area(3, 2, 3, 2); }
|
|
h1[data-i18n='WP'] { @include grid-area(3, 3, 3, 3); }
|
|
label[data-i18n-title='enter willpower points']{ @include grid-area(3, 4, 3, 4); }
|
|
|
|
|
|
/* ARMOR
|
|
----------------------------- */
|
|
h1[data-i18n='armor'] { @include grid-area(4, 1, 4, 1); }
|
|
label[data-i18n-title='enter armor text']{
|
|
@include grid-area(4, 2, 4, 13);
|
|
grid-column: 2 / 13;
|
|
}
|
|
|
|
/* SKILLS
|
|
----------------------------- */
|
|
h1[data-i18n='skills'] { @include grid-area(5, 1, 5, 1); }
|
|
div.sheet-skills {
|
|
grid-row: 6 / 6;
|
|
margin-left: 2%;
|
|
|
|
div.sheet-section-skills,
|
|
div.sheet-section-header {
|
|
grid-column-gap: 1%;
|
|
grid-template-columns: 1fr 4em 2.5em;
|
|
}
|
|
}
|
|
|
|
/* ATTACKS
|
|
----------------------------- */
|
|
h1[data-i18n='attacks'] { @include grid-area(7, 1, 7, 3); }
|
|
div.sheet-attacks {
|
|
grid-row: 8 / 8;
|
|
margin-left: 2%;
|
|
|
|
input[type='text'][name='attr_damage'] {
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-section-weapons,
|
|
div.sheet-section-header {
|
|
grid-column-gap: 1%;
|
|
grid-template-columns: 12em 4em 5em 1fr 2.5em;
|
|
}
|
|
}
|
|
|
|
/* OTHER NOTES
|
|
----------------------------- */
|
|
h1[data-i18n='other notes'] { @include grid-area(9, 1, 9, 3); }
|
|
div.sheet-notes {
|
|
grid-row: 10 / 10;
|
|
margin-left: 2%;
|
|
|
|
div.sheet-section-header,
|
|
div.sheet-section {
|
|
grid-column-gap: 1%;
|
|
grid-template-columns: 10em 1fr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* PC SHEET
|
|
============================= */
|
|
@import 'src/scss/_pc';
|
|
|
|
/* SETTINGS SHEET
|
|
============================= */
|
|
button[name='act_sheet_select'] {
|
|
height: 2em;
|
|
width: 2em;
|
|
}
|
|
|
|
/* ACCESSIBILITY ADJUSTMENTS
|
|
============================= */
|
|
.sheet-hidden {
|
|
clip : rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
height : 1px;
|
|
margin : -1px;
|
|
overflow : hidden;
|
|
padding : 0;
|
|
position : absolute;
|
|
width : 1px;
|
|
}
|
|
|
|
/* REMVOE WEBKIT
|
|
============================= */
|
|
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;} |