mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
2414 lines
51 KiB
SCSS
2414 lines
51 KiB
SCSS
// VARiABLES & COLORS
|
|
// =============================
|
|
@import "src/scss/_variables";
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** GLOBAL SETTINGS ***************************/
|
|
/********************************************************************************************************/
|
|
* {
|
|
box-sizing : border-box;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.charsheet * {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.charsheet .active-drop-target.dropping {
|
|
opacity: 0.4;
|
|
transition: opacity .15s ease-in-out;
|
|
-moz-transition: opacity .15s ease-in-out;
|
|
-webkit-transition: opacity .15s ease-in-out;
|
|
}
|
|
|
|
.charsheet .repcontainer .repitem.repitembroken {
|
|
border: 1px solid transparent !important; /* important needed to override Roll20 default style */
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border : none;
|
|
border-color : transparent;
|
|
box-shadow : none;
|
|
font-family : Helvetica, Arial, sans-serif;
|
|
font-size : 0.8em;
|
|
margin : 0em;
|
|
text-shadow : none;
|
|
|
|
&:before {display: none;}
|
|
&:hover {background-color: transparent;}
|
|
|
|
&[type="roll"],
|
|
&[type="action"] {
|
|
font-size: 1em;
|
|
margin: 0px;
|
|
padding: 0;
|
|
}
|
|
|
|
&[type="roll"] {
|
|
text-transform: uppercase;
|
|
font-family: serif;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
background-color: $darkblue;
|
|
color: $white;
|
|
border: 1px solid $white;
|
|
box-shadow: 0 0 5px $darkgray;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover {
|
|
background: $lighterblue;
|
|
}
|
|
}
|
|
}
|
|
|
|
div {
|
|
display : inline-block;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
fieldset {
|
|
background: transparent;
|
|
}
|
|
|
|
h1 {
|
|
background-color: $focusblue;
|
|
color : $white;
|
|
font-family : initial;
|
|
font-size : 1.5em;
|
|
line-height : 20px;
|
|
padding : 0.45em;
|
|
text-align : center;
|
|
text-transform : uppercase;
|
|
width : 100%;
|
|
font-weight : bold;
|
|
}
|
|
|
|
h2 {
|
|
color : $white;
|
|
font-size : 1em;
|
|
line-height : 2.4em;
|
|
text-transform: uppercase;
|
|
font-weight : bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
select {
|
|
border: 0.2em solid $reddish;
|
|
border-radius: 0px;
|
|
font-size: 8pt;
|
|
height: 2em;
|
|
line-height: 1.5em;
|
|
width: 100%;
|
|
}
|
|
select {
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus,
|
|
textarea:focus {
|
|
outline-color: $focusblue;
|
|
}
|
|
|
|
input[type="text"]:-webkit-input-placeholder,
|
|
input[type="text"]:-moz-placeholder,
|
|
input[type="text"]:-ms-input-placeholder,
|
|
input[type="text"]:-moz-placeholder {
|
|
font-variant: small-caps;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
input[type="text"]:placeholder-shown,
|
|
input[type="number"]:placeholder-shown,
|
|
textarea:placeholder-shown {
|
|
background-color: $lighttan;
|
|
border : 0.2em solid $browntan;
|
|
text-transform : capitalize;
|
|
}
|
|
|
|
input[type="number"] {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
input:hover,
|
|
select:hover {
|
|
background-color: $white;
|
|
border: 0.2em solid $lighterblue;
|
|
}
|
|
|
|
label {
|
|
color : $white;
|
|
display : inline-block;
|
|
padding-right : 0px;
|
|
margin-bottom : 2px;
|
|
text-transform: uppercase;
|
|
width : 100%;
|
|
vertical-align: top;
|
|
|
|
&[title*="rank"] > select {
|
|
border : 0.2em solid $reddish;
|
|
text-transform: capitalize;
|
|
width : 100%;
|
|
padding : 0;
|
|
}
|
|
|
|
& [title*="notes"] > span[data-i18n="notes"] { color: $white; }
|
|
}
|
|
|
|
span {
|
|
word-break: break-word;
|
|
}
|
|
|
|
textarea {
|
|
border :0.2em solid $reddish;
|
|
font-size : 12px;
|
|
font-weight : normal;
|
|
line-height : 18px;
|
|
overflow : auto;
|
|
overflow-wrap : break-word;
|
|
padding : 2px;
|
|
resize : none;
|
|
text-align : left;
|
|
vertical-align: top;
|
|
white-space : pre-line;
|
|
margin : 0;
|
|
}
|
|
|
|
.charsheet {
|
|
padding: 0px !important; /* Important needed to override Roll20 defaults */
|
|
min-width : 860px;
|
|
}
|
|
.sheet-backdrop{
|
|
border: 0.2em solid $reddish; /** REMOVE LATER */
|
|
background-color: #c4bdaf;
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%20Second%20Edition%20by%20Roll20/images/background.png);
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
select.sheet-simple {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
height: 1.8em;
|
|
text-transform: capitalize;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
border: 0.2em solid $reddish;
|
|
}
|
|
|
|
i {
|
|
display: inline-block;
|
|
height: 1em;
|
|
margin-bottom: -0.1em;
|
|
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
}
|
|
|
|
span.sheet-collapse {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.sheet-pictos {
|
|
font-family: "pictos";
|
|
}
|
|
|
|
%center-text,
|
|
.sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
%display-none {
|
|
display: none;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** HIGHLIGHT BUTTONS ***************************/
|
|
/********************************************************************************************************/
|
|
|
|
%tab-highlight {
|
|
color : $white;
|
|
background-color: #974f3e;
|
|
box-shadow : inset 0px 0px 3px 1px #5c1110;
|
|
}
|
|
|
|
input.sheet-whisper-toggle[value*="gm"] + button[name*="whisper"],
|
|
div.sheet-npc-general-options input[name="attr_toggles"][value*="npcspellcaster"] ~ button[name="act_toggle_npcspellcaster"] {
|
|
@extend %tab-highlight;
|
|
}
|
|
|
|
|
|
/******************************************************************************************/
|
|
/*************************** PC ***************************/
|
|
/****************************************************************************************/
|
|
|
|
button.sheet-settings-button {
|
|
position: absolute;
|
|
width: 2em;
|
|
height: 2em;
|
|
padding: 0;
|
|
margin-left: -7px;
|
|
margin-top: -7px;
|
|
|
|
border: 1.5px solid #fee;
|
|
border-radius: 50%;
|
|
|
|
color: #fdd;
|
|
background: #600;
|
|
opacity: 0;
|
|
|
|
font-size: 7pt;
|
|
line-height: 1em;
|
|
|
|
z-index: 10;
|
|
}
|
|
|
|
/* BUTTON HOVER EFFECTS */
|
|
$buttonHovers: "perception", "melee", "ranged", "classdc", "armorclass", "savingthrows", "hitpoints", "skills", "spellattack", "spelldc", "ability-scores", "details", "languages", "inv-display-grid", "actions", "action-abilities", "action-activity", "action-reaction", "feats-ancestry-grid", "feats-skill-grid", "feats-general-grid", "feats-class-grid", "feats-bonus-grid";
|
|
@each $button in $buttonHovers {
|
|
.sheet-#{$button}:hover button.sheet-settings-button {
|
|
@extend %opacity05
|
|
}
|
|
|
|
.sheet-#{$button}:hover button.sheet-settings-button:hover {
|
|
@extend button.sheet-settings-button:focus
|
|
}
|
|
}
|
|
|
|
$spellsHovers: "power", "innate", "focus", "cantrips", "normalspells";
|
|
@each $button in $spellsHovers {
|
|
.sheet-spells .sheet-#{$button}:hover button.sheet-settings-button {
|
|
@extend %opacity05
|
|
}
|
|
|
|
.sheet-spells .sheet-#{$button}:hover button.sheet-settings-button:hover {
|
|
@extend button.sheet-settings-button:focus
|
|
}
|
|
}
|
|
|
|
%opacity05 { opacity: 0.5; }
|
|
|
|
button.sheet-settings-button:focus { opacity: 1; }
|
|
|
|
input[name="attr_toggles"][value*="class_dc"] ~ div.sheet-character div.sheet-classdc button.sheet-settings-button,
|
|
input[name="attr_toggles"][value*="shield"] ~ div.sheet-character div.sheet-shield-grid button.sheet-settings-button,
|
|
input[name="attr_toggles"][value*="armor_class"] ~ div.sheet-character div.sheet-armorclass-main button.sheet-settings-button,
|
|
input[name="attr_toggles"][value*="perception"] ~ div.sheet-character div.sheet-perception button.sheet-settings-button[name*="perception"],
|
|
input[name="attr_toggles"][value*="hitpoints"] ~ div.sheet-character div.sheet-hitpoints button.sheet-settings-button[name*="hitpoints"],
|
|
input[name="attr_toggles"][value*="settings"] + button.sheet-settings-button,
|
|
input[name="attr_toggles"][value*="settings"] + div > button.sheet-settings-button,
|
|
.sheet-highlight-button {
|
|
opacity: 1;
|
|
background-color: #ff0400;
|
|
}
|
|
|
|
|
|
@each $type in "focus", "cantrips", "normalspells", "innate" {
|
|
div.sheet-#{$type} {
|
|
@extend %display-none;
|
|
}
|
|
|
|
input[name="attr_toggles"][value*=#{$type}] ~ div.sheet-spells div.sheet-column div.sheet-#{$type} {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
/* HIDE PC SECTIONS NOT NEEDED ON NPC PAGE
|
|
----------------------------- */
|
|
@each $attribute in $attributes {
|
|
input[name="attr_toggles"][value*="#{$attribute}"] ~ div.sheet-character div.sheet-column div.sheet-ability-scores div.sheet-#{$attribute}-row button.sheet-settings-button {
|
|
@extend .sheet-highlight-button
|
|
}
|
|
}
|
|
|
|
@each $skill in $skills {
|
|
input[name="attr_toggles"][value*="#{$skill}"] ~ div.sheet-character div.sheet-skills button.sheet-settings-button[name*="#{$skill}"] {
|
|
@extend .sheet-highlight-button
|
|
}
|
|
}
|
|
|
|
div.sheet-background-color {
|
|
background-color: $browntan;
|
|
color: $white;
|
|
}
|
|
|
|
div.sheet-ability-select {
|
|
label {
|
|
margin-bottom: 0em;
|
|
|
|
&:last-child {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
background-color: $reddish;
|
|
border : 0.2em solid $reddish;
|
|
border-radius : 0;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
color : $white;
|
|
font-size : 0.6em;
|
|
line-height : 1em;
|
|
margin-bottom : 0px;
|
|
padding : 0;
|
|
text-transform : uppercase;
|
|
vertical-align: top;
|
|
}
|
|
|
|
span {
|
|
background-color: $white;
|
|
border : 1px solid $reddish;
|
|
display : inline-block;
|
|
height : 3em;
|
|
width : 3em;
|
|
}
|
|
}
|
|
|
|
input.sheet-circle {
|
|
background-color: $brownred;
|
|
border : 0.2em solid $reddish;
|
|
border-radius : 100%;
|
|
text-align : center;
|
|
overflow : hidden;
|
|
}
|
|
|
|
div.sheet-circle {
|
|
font-weight: bold;
|
|
@extend input.sheet-circle;
|
|
|
|
label span:first-child {
|
|
display : block;
|
|
padding-top : 5px;
|
|
background : $reddish;
|
|
color : $white;
|
|
text-align : center;
|
|
width : 100%;
|
|
font-size : 1em;
|
|
}
|
|
|
|
label span:last-child {
|
|
display: block;
|
|
color: #fff;
|
|
margin-top: 0.4em;
|
|
font-size : 1.5em;
|
|
text-align : center;
|
|
}
|
|
}
|
|
|
|
div.sheet-grid {
|
|
display : grid;
|
|
grid-column-gap: 1%;
|
|
}
|
|
|
|
div.sheet-repeating h3,
|
|
div.sheet-repeating label {
|
|
color : #000;
|
|
font-size : 0.8em;
|
|
grid-row : 1;
|
|
text-transform: uppercase;
|
|
width : 100%;
|
|
}
|
|
|
|
input.sheet-2em {
|
|
height : 2em;
|
|
padding : 0px;
|
|
text-align: center;
|
|
width : 2em;
|
|
}
|
|
|
|
input.sheet-3em[type="text"],
|
|
input.sheet-3em[type="number"] {
|
|
height : 3em;
|
|
padding : 0px;
|
|
text-align: center;
|
|
width : 3em;
|
|
}
|
|
|
|
input.sheet-4em {
|
|
width: 4em;
|
|
}
|
|
|
|
input.sheet-5em {
|
|
text-align: center;
|
|
width: 5em;
|
|
}
|
|
|
|
label.sheet-sublabel {
|
|
text-align: center;
|
|
|
|
select {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
span:last-child {
|
|
background: $brownred;
|
|
display: block;
|
|
|
|
&:empty::before {
|
|
content: "-";
|
|
}
|
|
|
|
span.sheet-inline {
|
|
display: inline;
|
|
margin-right: 5%;
|
|
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-darkred {
|
|
background-color: $reddish;
|
|
padding : 3px;
|
|
}
|
|
|
|
.sheet-darkred + input {
|
|
padding: 3px;
|
|
}
|
|
|
|
span.sheet-display {
|
|
display : inline-block;
|
|
border-radius : 50%;
|
|
padding : 5%;
|
|
|
|
background-color: $brownred;
|
|
color : $white;
|
|
|
|
font-weight : bold;
|
|
text-align : center;
|
|
}
|
|
|
|
span.sheet-sublabel {
|
|
border-top-left-radius : 0.5em;
|
|
border-top-right-radius: 0.5em;
|
|
display : block;
|
|
font-size : 0.6em;
|
|
padding : 0em;
|
|
text-align : center;
|
|
text-transform : uppercase;
|
|
width : 100%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.sheet-symbol {
|
|
color : $white;
|
|
font-weight: bold;
|
|
position : relative;
|
|
text-align : center;
|
|
top : 35%;
|
|
}
|
|
|
|
div.sheet-column label[data-i18n-title="level"],
|
|
div.sheet-column label[data-i18n-title="hero_points"],
|
|
div.sheet-ability-scores input[type="number"],
|
|
div.sheet-ability-scores input[type="text"],
|
|
div.sheet-speed-col input[name="attr_speed"] {
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-dcbase {
|
|
color : $white;
|
|
font-size : 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* DC Base */
|
|
div.sheet-dcbase:nth-of-type(2) {
|
|
div {
|
|
display: inline-block;
|
|
width: 40%;
|
|
}
|
|
|
|
span[name="attr_ac_ability_display"] {
|
|
display: inline-block;
|
|
height: 2em;
|
|
width: 2em;
|
|
}
|
|
|
|
span[name="attr_ac_ability_display"],
|
|
span[data-i18n="or"] {
|
|
background-color: $white;
|
|
border: 1px solid $reddish;
|
|
}
|
|
|
|
span[data-i18n="or"] {
|
|
text-transform: uppercase;
|
|
color: $reddish;
|
|
}
|
|
}
|
|
|
|
/* PC sheet info static section at the top */
|
|
div.sheet-pc-info {
|
|
display : grid;
|
|
grid-column-gap : 5px;
|
|
grid-template-columns: 1.45fr 3.75fr 0.55fr;
|
|
margin-top : 1%;
|
|
}
|
|
|
|
/* "Character Sheet" row & columns */
|
|
div.sheet-column button[name="act_toggle_ancestry"] {
|
|
font-family: "pictos";
|
|
width: 2em;
|
|
}
|
|
|
|
div.sheet-character-row div.sheet-column {
|
|
margin: 1% 0.5%;
|
|
padding: 1% 2%;
|
|
|
|
&:nth-of-type(1) {
|
|
width: 25%;
|
|
}
|
|
|
|
/* Level column */
|
|
&:nth-of-type(3) {
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
div.sheet-pc-info div.sheet-column {
|
|
@for $i from 1 through 3 {
|
|
&:nth-of-type(#{$i}) {
|
|
grid-row-start: 1;
|
|
grid-column-start: $i;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(1) { padding: 0.25em 0.5em; }
|
|
&:nth-of-type(3) { padding: 0.25em; }
|
|
}
|
|
|
|
/* Tabs */
|
|
div.sheet-tabs {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-column-gap: 5px;
|
|
grid-template-columns: 3em repeat(6, 1fr);
|
|
margin: 5px;
|
|
width: calc(100% - 10px);
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
height: 100%;
|
|
opacity: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
|
|
&:checked + span {
|
|
@extend %tab-highlight;
|
|
}
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
color: $black;
|
|
text-align: center;
|
|
font-size: 1em;
|
|
|
|
input, span {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
}
|
|
|
|
&[data-i18n-title="whisper_rolls_to_gm"] {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
&:nth-of-type(1n+2) > span {
|
|
background-color: $whitishtan;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px $darkgray;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
height: 2.5em;
|
|
padding: 5% 2%;
|
|
}
|
|
|
|
&.sheet-whisper-toggle span {
|
|
background: transparent;
|
|
border-radius: 50%;
|
|
box-shadow: unset;
|
|
height : 3em;
|
|
padding: 25% 2%;
|
|
text-transform: lowercase;
|
|
width : 3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* includes the options buttons for changing characters */
|
|
div.sheet-options button[name="act_toggle_npc"],
|
|
div.sheet-npc-general-options button[name="act_toggle_character"],
|
|
div.sheet-npc-general-options button[name="act_toggle_npcspellcaster"] {
|
|
background-color: $whitishtan;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px $darkgray;
|
|
font-weight: bold;
|
|
height: 2.5em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
div.sheet-options button[name="act_toggle_npc"],
|
|
div.sheet-npc-general-options button[name="act_toggle_character"],
|
|
div.sheet-npc-general-options button[name="act_toggle_npcspellcaster"] {
|
|
padding: 1%;
|
|
width: 10em;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* inside the "Character Sheet" column */
|
|
div.sheet-column {
|
|
h1[data-i18n="character_sheet"] {
|
|
background-color: transparent;
|
|
color: $reddish;
|
|
-webkit-text-fill-color: $reddish;
|
|
-webkit-text-stroke-width: 1px;
|
|
font-size: 2em;
|
|
width: 100%;
|
|
}
|
|
|
|
h2[data-i18n="proficiency"] {
|
|
color : $focusblue;
|
|
line-height : inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.sheet-character-prof,
|
|
div.sheet-character-action {
|
|
color : $focusblue;
|
|
font-size : 0.9em;
|
|
font-family : "Arial Narrow", sans-serif !important;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
div.sheet-character-prof { width : 41%; }
|
|
|
|
div.sheet-character-action {
|
|
padding-left: 5%;
|
|
width: 57%;
|
|
|
|
img {
|
|
filter: invert(80%);
|
|
margin-right: 2%;
|
|
width: 20%;
|
|
}
|
|
|
|
ul, li {
|
|
margin: 0;
|
|
padding: 1%;
|
|
list-style-type: none;
|
|
|
|
span {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* "Ancestry and Heritage", "Background"...column at the top */
|
|
div.sheet-character-info {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
grid-column-gap: 2px;
|
|
grid-row-gap: 2px;
|
|
padding: 2px;
|
|
|
|
> * { margin: 0; }
|
|
|
|
> label {
|
|
align-items: stretch;
|
|
border: 1px solid $reddish;
|
|
display: flex;
|
|
padding: 0;
|
|
|
|
> span {
|
|
background: $focusblue;
|
|
box-sizing: border-box;
|
|
color: $white;
|
|
flex: 0 0 auto;
|
|
font-size: .75em;
|
|
font-weight: bold;
|
|
min-width: 33%;
|
|
padding: .8em;
|
|
text-align: center;
|
|
}
|
|
|
|
> input {
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
border: 0;
|
|
padding: .5em;
|
|
padding-left: 1em;
|
|
width: 1px;
|
|
flex-grow: 1;
|
|
height: auto;
|
|
|
|
&:placeholder-shown {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
&[data-i18n-title="alignment"] { grid-area: 5 / 5 / 5 / 9;}
|
|
&[data-i18n-title="ancestry_heritage"] { grid-area: 2 / 1 / 2 / -1; }
|
|
&[data-i18n-title="background"] { grid-area: 4 / 7 / 4 / -1; }
|
|
&[data-i18n-title="character_name"] { grid-area: 1 / 1 / 1 / -1; }
|
|
&[data-i18n-title="class"] { grid-area: 4 / 1 / 4 / 7; }
|
|
&[data-i18n-title="deity"] { grid-area: 5 / 9 / 5 / -1;}
|
|
&[data-i18n-title="experience_points_xp"] { grid-area: 3 / 7 / 3 / -1; }
|
|
&[data-i18n-title="player_name"] { grid-area: 3 / 1 / 3 / 7; }
|
|
&[data-i18n-title="size"] { grid-area: 5 / 1 / 5 / 5; }
|
|
}
|
|
}
|
|
|
|
/* Character Details row */
|
|
div.sheet-pfrow {
|
|
padding: 0px 0.5%;
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-column {
|
|
label[data-i18n-title="level"] > span {
|
|
background-color: $focusblue;
|
|
display : inline-block;
|
|
height : 2em;
|
|
padding : 0.5em;
|
|
text-align : center;
|
|
width : 100%;
|
|
}
|
|
|
|
label[data-i18n-title="hero_points"] > span {
|
|
color: $focusblue;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
input[name="attr_level"],
|
|
input[name="attr_hero_points"] {
|
|
font-size : 1em;
|
|
font-weight: bold;
|
|
height: 4em;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
div.sheet-character {
|
|
grid-template-columns: 2fr 2.5fr 1.5fr;
|
|
grid-template-rows: repeat(5, auto);
|
|
grid-column-gap: 0.5%;
|
|
padding: 0.5%;
|
|
|
|
div.sheet-column > div {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
div.sheet-settings label[data-i18n-title*="notes"],
|
|
.sheet-oneliner {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.sheet-oneliner span {
|
|
padding: 0em;
|
|
font-size: 0.6em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
div.sheet-section-pad {
|
|
padding: 5px;
|
|
|
|
.repitem:not(:first-child) { margin-top: .2em; }
|
|
}
|
|
|
|
/* ACTIONS */
|
|
div.sheet-actions {
|
|
grid-area: 4 / 1 / 4 / 1;
|
|
|
|
button[type="roll"] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
button[name="roll_action"] {
|
|
grid-column: 1 / 5;
|
|
min-height: 1em;
|
|
}
|
|
|
|
span.sheet-collapse {color: white;}
|
|
}
|
|
|
|
div.sheet-actions .sheet-settings {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
/* Ability Section */
|
|
div.sheet-ability-scores {
|
|
text-transform: capitalize;
|
|
|
|
/* Shows a span and reveals an input on hover */
|
|
input.sheet-hover,
|
|
label.sheet-hover:hover span.sheet-hover,
|
|
input.sheet-hover:focus + span.sheet-hover {
|
|
display: none;
|
|
}
|
|
|
|
label.sheet-hover:hover input.sheet-hover,
|
|
label.sheet-hover input.sheet-hover:focus {
|
|
display: inherit;
|
|
}
|
|
|
|
input[type="number"] {
|
|
height: 2.5em;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
display : grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-column-gap: 2%;
|
|
}
|
|
|
|
div.sheet-display {
|
|
display: grid;
|
|
grid-template-columns: 1.25fr 2fr 3.5fr 1.25fr;
|
|
grid-column-gap: 5px;
|
|
align-items: stretch;
|
|
margin-bottom: 1px;
|
|
|
|
> button[type="action"] {
|
|
position: absolute;
|
|
}
|
|
|
|
div.sheet-ability-score {
|
|
text-align: right;
|
|
|
|
span:first-child {
|
|
font-size : 1em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.sheet-circle {
|
|
font-size: 1.5em;
|
|
padding: 5% 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-ability-modifier span[data-i18n="modifier"],
|
|
div.sheet-ability-score span[data-i18n="score"] {
|
|
font-size : 0.8em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
%attribute-padding {
|
|
padding-right: 2%;
|
|
padding-left: 2%;
|
|
}
|
|
|
|
@each $attribute in $attributes {
|
|
div.sheet-#{$attribute}-row {
|
|
@extend %attribute-padding;
|
|
}
|
|
}
|
|
|
|
div.sheet-ability-modifier { text-align: left; }
|
|
|
|
/* ABILITY settings */
|
|
div.sheet-ability-scores h1,
|
|
div.sheet-settings label.sheet-notes {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
div.sheet-strength-row { padding-top: 1%; }
|
|
|
|
/* ARMOR CLASS / SAVING THORWS / HIT POINTS / PERCEPTION */
|
|
div.sheet-armorclass { grid-area: 1 / 2 / 2 / 2; }
|
|
div.sheet-savingthrows { grid-area: 3 / 2 / 5 / 2; }
|
|
div.sheet-hitpoints { grid-area: 1 / 3 / 3 / 3; }
|
|
div.sheet-perception { grid-area: 4 / 3 / 5 / 3; }
|
|
|
|
|
|
/* Class DC section */
|
|
div.sheet-classdc {
|
|
div.sheet-circle {
|
|
color: $white;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
height: 3em;
|
|
padding: 15% 0px;
|
|
width: 3em;
|
|
}
|
|
|
|
div.sheet-display {
|
|
grid-template-columns: 2fr 3fr 2fr 2fr 2fr 2fr;
|
|
padding: 1%;
|
|
|
|
div.sheet-dcbase {
|
|
display : grid;
|
|
grid-column-gap : 1%;
|
|
grid-template-columns: 1fr 2fr;
|
|
padding : 1%;
|
|
|
|
span.sheet-sublabel:last-child {
|
|
font-size : 0.8em;
|
|
font-size : 1em;
|
|
grid-column: 2 / 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
|
|
|
|
input { @extend %center-text; }
|
|
}
|
|
}
|
|
|
|
/* Speed */
|
|
div.sheet-speed {
|
|
background-color : $reddish;
|
|
grid-template-columns: 1.5fr 1fr 1fr;
|
|
padding : 0em;
|
|
|
|
textarea {
|
|
border : none;
|
|
height : 2em;
|
|
margin-bottom: 0em;
|
|
min-height : 2em;
|
|
overflow : hidden;
|
|
resize : vertical;
|
|
}
|
|
|
|
div {
|
|
background-color: $white;
|
|
border : 0.2em solid $reddish;
|
|
grid-column : 1 / 4;
|
|
grid-row : 2;
|
|
padding : 0.2em 0.5em;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
h1[data-i18n="speed"] { padding: 0.5em 0.2em; }
|
|
|
|
h3[data-i18n="movement_notes"] {
|
|
font-size : 1em;
|
|
line-height: 1em;
|
|
position : relative;
|
|
}
|
|
|
|
input[type="text"] {
|
|
border: none;
|
|
text-align: center;
|
|
}
|
|
|
|
label[data-i18n-title="speed_in_feet"] { padding: 0.5em 0.2em; }
|
|
|
|
span[data-i18n="feet"] {
|
|
color : $white;
|
|
font-family : initial;
|
|
text-align : center;
|
|
text-transform: uppercase;
|
|
padding-top : 15%;
|
|
}
|
|
}
|
|
|
|
/* Armor Class */
|
|
div.sheet-armorclass {
|
|
padding-bottom: 1%;
|
|
|
|
hr {
|
|
margin: 1% 1% 1% 2%;
|
|
}
|
|
|
|
input {
|
|
@extend %center-text;
|
|
}
|
|
|
|
/* Armor Class main area */
|
|
div.sheet-armorclass-main {
|
|
grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr;
|
|
margin-top: 1%;
|
|
padding-bottom: 0em;
|
|
|
|
div.sheet-circle {
|
|
grid-column: 1;
|
|
height : 5em;
|
|
text-transform: uppercase;
|
|
width : 5em;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 3fr 1fr 1fr 1fr;
|
|
grid-column: 1 / 7;
|
|
}
|
|
}
|
|
|
|
div.sheet-armor-cap {
|
|
display : grid;
|
|
grid-template-columns: 2fr 1fr 3fr;
|
|
|
|
span[data-i18n="or"] {
|
|
color: $white;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
height: 2em;
|
|
line-height: 0.8em;
|
|
padding-top: 20%;
|
|
position : relative;
|
|
text-align : center;
|
|
text-transform: uppercase;
|
|
top: 2em;
|
|
width: 2em;
|
|
}
|
|
}
|
|
|
|
/* Unarmored Row in Armor Class */
|
|
div.sheet-unarmored-grid {
|
|
grid-column : 1 / -1;
|
|
grid-row : 2;
|
|
grid-template-columns: 2fr 2fr 2fr 2fr;
|
|
text-align : center;
|
|
}
|
|
|
|
/* Shield row in Armor Class */
|
|
div.sheet-shield-grid {
|
|
display : grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr 3fr;
|
|
text-align : center;
|
|
grid-column-gap : 1%;
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
|
|
grid-column: 1 / 7;
|
|
}
|
|
}
|
|
|
|
div.sheet-shield-hp {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 2fr;
|
|
|
|
label + span {
|
|
color : $reddish;
|
|
font-size: 2em;
|
|
}
|
|
|
|
label[data-i18n-title="shield_hp"] {
|
|
border-right: none;
|
|
}
|
|
label[data-i18n-title="shield_hp_max"] {
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
div.sheet-circle {
|
|
border : 0.2em solid $reddish;
|
|
border-radius: 5em;
|
|
grid-column : 1;
|
|
height : 5em;
|
|
width : 5em;
|
|
|
|
span:first-child {
|
|
color: $white;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Saving Throws */
|
|
div.sheet-savingthrows {
|
|
padding-bottom: 1%;
|
|
text-align: center;
|
|
|
|
input {
|
|
@extend %center-text;
|
|
}
|
|
|
|
div > button[type="roll"] {
|
|
font-size: 1em;
|
|
margin: 0.4em 0;
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-display {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-column-gap: 3.5%;
|
|
padding: 0% 2%;
|
|
width: 100%;
|
|
|
|
div.sheet-circle {
|
|
font-size: 1.7em;
|
|
font-weight: bold;
|
|
height: 2.5em;
|
|
padding: 5% 3%;
|
|
width: 2.5em;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
|
|
span {font-size: 0.9em;}
|
|
span.sheet-proficiency {font-size: 0.75em;}
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-column-gap: 3%;
|
|
padding: 0% 2%;
|
|
|
|
div.sheet-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-row-gap: 2%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hit Points */
|
|
div.sheet-hitpoints {
|
|
|
|
hr { margin: 3% 0%; }
|
|
|
|
div.sheet-circle {
|
|
grid-row : 1 / 3;
|
|
height : 5em;
|
|
width : 5em;
|
|
}
|
|
|
|
div.sheet-display {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
margin-top: 1%;
|
|
|
|
input { @extend %center-text; }
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
padding-bottom : 0em;
|
|
|
|
input[name="attr_hit_points_ancestry"] {
|
|
height : 3em;
|
|
text-align: center;
|
|
}
|
|
|
|
label[title*="ancestry"] {
|
|
grid-column: 1 / 2;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Resistance, Conditions, Senses, Languages repeating sections */
|
|
div.sheet-languages button[type="roll"]
|
|
, div.sheet-senses button[type="roll"]
|
|
, div.sheet-resistance button[type="roll"]
|
|
, div.sheet-conditions button[type="roll"] {
|
|
z-index: 5;
|
|
}
|
|
div.sheet-repeating {
|
|
background: $white;
|
|
color: $black;
|
|
margin: 5px 0;
|
|
|
|
button[name*="settings"],
|
|
h3 {
|
|
@extend %center-text;
|
|
}
|
|
|
|
textarea { min-height: 10em; }
|
|
|
|
.repitem {
|
|
background-color: $white;
|
|
border-bottom: 1px solid $gray;
|
|
|
|
&:nth-child(even) {
|
|
background: $whitish;
|
|
}
|
|
}
|
|
|
|
.sheet-settings.sheet-repeating-grid {
|
|
margin-top: 25px !important;
|
|
}
|
|
}
|
|
|
|
div.sheet-repeating-grid {
|
|
grid-column-gap: 2px;
|
|
grid-template-columns: 1fr 1.75em;
|
|
align-items: center;
|
|
margin-bottom: -15px;
|
|
|
|
button[type="roll"] {
|
|
padding: 1px;
|
|
box-shadow: unset;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 11pt;
|
|
text-align: left;
|
|
text-transform: unset;
|
|
background-color: $focusblue;
|
|
|
|
&:hover { background: $lighterblue; }
|
|
}
|
|
|
|
input { text-align: left; }
|
|
|
|
span.sheet-collapse { grid-column: 1 / -1; }
|
|
|
|
span.sheet-repeating-title {
|
|
overflow-x: none;
|
|
text-overflow: ellipsis;
|
|
padding-left: 10px;
|
|
font-variant: small-caps;
|
|
}
|
|
}
|
|
|
|
div.sheet-display button[name="act_collapse"],
|
|
div.sheet-repeating-grid-display button[name="act_collapse"],
|
|
div.sheet-inv-display-grid button[name="act_collapse"],
|
|
div.sheet-repeating-grid button[name*="collapse"] {
|
|
font-family : "Pictos";
|
|
background: transparent;
|
|
color: $black;
|
|
width: 1.5em;
|
|
line-height: 1em;
|
|
font-size: 1em;
|
|
text-transform: unset;
|
|
box-shadow: unset;
|
|
border: unset;
|
|
}
|
|
|
|
div.sheet-display button[name="act_collapse"],
|
|
div.sheet-inv-display-grid button[name="act_collapse"],
|
|
div.sheet-repeating-grid-display button[name="act_collapse"],
|
|
div.sheet-repeating button[name*="collapse"] {
|
|
transform : rotate(90deg);
|
|
}
|
|
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-display button[name="act_collapse"],
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-inv-display-grid button[name="act_collapse"],
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-grid-display button[name="act_collapse"],
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-grid button[name="act_collapse"] {
|
|
transform:rotate(-90deg);
|
|
}
|
|
|
|
div.sheet-repeating-grid-display {
|
|
button[name="act_collapse"] {
|
|
color: $black;
|
|
|
|
&:hover { color: $lighterblue; }
|
|
}
|
|
}
|
|
|
|
div.sheet-inv-display-grid span.sheet-collapse,
|
|
div.sheet-repeating-grid span.sheet-collapse {
|
|
font-size: 10pt;
|
|
border-color: $reddish;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
/* Perception */
|
|
div.sheet-perception {
|
|
padding: 1% 1% 2% 1%;
|
|
|
|
div.sheet-circle {
|
|
color: $white;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
height: 3em;
|
|
padding: 15% 0px;
|
|
width: 3em;
|
|
}
|
|
|
|
div.sheet-display {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
margin: 1% 1px;
|
|
}
|
|
|
|
div.sheet-button-grid {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
button[type="roll"] {
|
|
font-size: 0.8em;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
input[type="text"] {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div.sheet-senses {
|
|
div.sheet-settings {
|
|
input[type="text"] {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Melee & Ranged Strikes */
|
|
div.sheet-strikes {
|
|
h2 {
|
|
line-height: 2em;
|
|
|
|
&[data-i18n="notes"] {
|
|
margin-top: 5%;
|
|
}
|
|
}
|
|
|
|
h1+& {
|
|
margin-bottom: 2px;
|
|
padding-top: 1%;
|
|
}
|
|
|
|
span {
|
|
&.sheet-collapse {
|
|
color: $white;
|
|
padding-left: 5px;
|
|
grid-column: 1 / -1;
|
|
margin: 5px;
|
|
}
|
|
|
|
&.sheet-sublabel {
|
|
font-size: 0.8em;
|
|
line-height: 1em;
|
|
padding: 3px;
|
|
}
|
|
|
|
&[data-i18n="weapon"] {
|
|
grid-area: 1 / 1 / 1 / 4;
|
|
}
|
|
|
|
&[data-i18n="atk"] {
|
|
grid-area: 3 / 1 / 3 / 1;
|
|
}
|
|
|
|
&[data-i18n="damage"] {
|
|
grid-area: 3 / 2 / 3 / 4;
|
|
}
|
|
}
|
|
|
|
button {
|
|
&.sheet-display-weapon {
|
|
grid-area: 2 / 1 / 2 / 4;
|
|
}
|
|
|
|
&.sheet-display-attack {
|
|
grid-row: 4;
|
|
}
|
|
|
|
&.sheet-display-damage {
|
|
grid-column: 2 / 4;
|
|
}
|
|
|
|
&.sheet-settings-button {
|
|
grid-area: 1 / 1 / 1 / 1;
|
|
}
|
|
|
|
&[type="roll"] {
|
|
min-height: 2em;
|
|
font-size: 0.8em;
|
|
max-width: 100%;
|
|
|
|
&:first-of-type {
|
|
grid-column: 1 / 3;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
background-color: $focusblue;
|
|
font-weight: normal;
|
|
|
|
&:hover {
|
|
background: $lighterblue;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[name="act_collapse"] {
|
|
color: $white;
|
|
grid-area: 1 / 3 / 1 / 3;
|
|
}
|
|
}
|
|
|
|
div.sheet-display {
|
|
grid-row-gap: 3%;
|
|
margin-top: 1%;
|
|
grid-template-columns: 1fr 1fr 1.5em;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
label.sheet-sublabel input,
|
|
div.sheet-ability-select input,
|
|
input[name="attr_damage_weapon_specialization"],
|
|
input[name="attr_damage_other"] {
|
|
text-align: center;
|
|
}
|
|
|
|
span.sheet-sublabel {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
div.sheet-strikes-grid {
|
|
grid-template-columns: 1fr 0.5fr 1fr 1fr 1fr 1fr;
|
|
|
|
h2,
|
|
label[data-i18n-title*="weapon_name"],
|
|
label[data-i18n-title*="weapon_traits"] {
|
|
grid-column: 1 / -1;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
div.sheet-damage-grid {
|
|
grid-template-columns: 1fr 1fr 0.25fr 1.5fr 0.25fr 0.25fr 0.25fr;
|
|
grid-row-gap: 2%;
|
|
|
|
h2,
|
|
label[data-i18n-title*="damage_supplementary_effects"],
|
|
label[data-i18n-title*="attack_damage_additional"] {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
label {
|
|
&[data-i18n-title*="weapon_specialization_damage"] {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
&[data-i18n-title*="weapon_temporary_damage"] {
|
|
grid-column: 3 / 5;
|
|
}
|
|
|
|
&[data-i18n-title*="weapon_other_damage"] {
|
|
grid-column: 5 / -1;
|
|
}
|
|
|
|
&[data-i18n-title*="bludgeoning_damage"],
|
|
&[data-i18n-title*="piercing_damage"],
|
|
&[data-i18n-title*="slashing_damage"] {
|
|
font-size: 8pt;
|
|
text-align: center;
|
|
height: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.repcontainer .repitem:nth-child(even) {
|
|
background: $graylike;
|
|
}
|
|
|
|
div.sheet-circle {
|
|
color: $white;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
height: 2.5em;
|
|
padding: 10% 0px;
|
|
width: 2.5em;
|
|
|
|
label span {
|
|
margin-top: 0 !important;
|
|
line-height: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
button.sheet-pictos + div.sheet-grid { margin-bottom: -20px; }
|
|
|
|
span.sheet-collapse { grid-area: 5 / 1 / 5 / 3; }
|
|
|
|
/* Weapon Proficiencies */
|
|
div.sheet-weapon-proficiences-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
div.sheet-weapon-proficiences-grid,
|
|
div.sheet-repeating-weapon-proficiences-grid {
|
|
h2 {
|
|
grid-row: 1;
|
|
padding-left: 3%;
|
|
}
|
|
|
|
label { grid-row: 2; }
|
|
}
|
|
|
|
div.sheet-repeating-weapon-proficiences-grid label[data-i18n="other"],
|
|
div.sheet-weapon-proficiences-grid h2[data-i18n="simple"],
|
|
div.sheet-weapon-proficiences-grid label[data-i18n-title="simple_weapon_proficiencies_rank"],
|
|
div.sheet-repeating-weapon-proficiences-grid label[data-i18n-title="other_weapon_proficiencies_name"] {
|
|
grid-column : 1;
|
|
}
|
|
|
|
div.sheet-weapon-proficiences-grid h2[data-i18n="martial"],
|
|
div.sheet-weapon-proficiences-grid label[data-i18n-title="martial_weapon_proficiencies_rank"],
|
|
div.sheet-repeating-weapon-proficiences-grid label[data-i18n-title="other_weapon_proficiencies_rank"] {
|
|
grid-column : 2;
|
|
}
|
|
|
|
div.sheet-repeating-weapon-proficiences-grid {
|
|
grid-template-columns: 2.5fr 1fr;
|
|
|
|
input[name="attr_weapon_proficiencies_other"] {
|
|
padding-left: 2%;
|
|
}
|
|
}
|
|
|
|
/* SKILLS */
|
|
div.sheet-skills {
|
|
h2 {
|
|
line-height: 1.5em;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
font-family: serif;
|
|
}
|
|
|
|
div.sheet-display {
|
|
align-items : center;
|
|
grid-template-columns: 7.5em 2fr 0.5fr 2fr 2fr 2fr 2fr 2fr;
|
|
justify-items : left;
|
|
margin : 2px;
|
|
padding : 0;
|
|
width : calc(100% - 4px);
|
|
|
|
button {
|
|
&[name*="act_toggle"],
|
|
&[type="roll"] {
|
|
grid-column: 1;
|
|
}
|
|
|
|
&[type="roll"] {
|
|
font-size : 0.75em;
|
|
font-weight : bold;
|
|
letter-spacing: 0.1em;
|
|
overflow : hidden;
|
|
width : 95%;
|
|
}
|
|
|
|
&[name*="act_toggle"] {
|
|
position: absolute;
|
|
}
|
|
|
|
&[name="roll_LORE"] {
|
|
min-height: 2.4em;
|
|
}
|
|
|
|
}
|
|
|
|
div.sheet-circle {
|
|
font-size : 1em;
|
|
height : 2.5em;
|
|
white-space: nowrap;
|
|
width : 2.5em;
|
|
line-height: 2.5em;
|
|
padding : 0;
|
|
}
|
|
|
|
span.sheet-symbol {
|
|
top: unset;
|
|
}
|
|
}
|
|
|
|
div.sheet-settings {
|
|
grid-row-gap : 5px;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
input {
|
|
@extend %center-text;
|
|
}
|
|
}
|
|
|
|
div.sheet-ability-select {
|
|
select {
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ************************* */
|
|
/* ******* DETAILS tab ***** */
|
|
/* ************************* */
|
|
div.sheet-details {
|
|
grid-column-gap: 1%;
|
|
grid-row-gap: 0.5%;
|
|
grid-template-columns: 1fr 1fr;
|
|
padding: 0 5px;
|
|
|
|
div.sheet-column {
|
|
display: inline-block;
|
|
|
|
|
|
&:nth-of-type(1) {
|
|
grid-column: 1 / 3;
|
|
|
|
& > div {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
font-size: 10pt;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
label[data-i18n-title="appearance"] { grid-column: 1 / -1; }
|
|
|
|
div.sheet-characteristics {
|
|
display: grid;
|
|
grid-area: 1 / 1 / 1 / -1;
|
|
grid-column-gap: 5px;
|
|
grid-template-columns: 1fr 1fr 1fr 0.5fr 1fr 0.5fr 0.5fr;
|
|
}
|
|
|
|
div.sheet-personality {
|
|
grid-column: 1 / -1;
|
|
|
|
h1 { grid-column: 1 / -1; }
|
|
|
|
div.sheet-section-pad label {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
div.sheet-notes {
|
|
grid-area: 3 / 1 / 3 / -1;
|
|
position: relative;
|
|
|
|
button.sheet-settings-button {
|
|
font-size: 8pt;
|
|
left: 9px;
|
|
position: absolute;
|
|
top: 9px;
|
|
}
|
|
|
|
.sheet-settings:before { display: none; }
|
|
|
|
textarea {
|
|
grid-column: 1;
|
|
height: 110px;
|
|
margin-bottom: 0;
|
|
|
|
&:first-child {
|
|
grid-area: 1 / 1 / 4 / 1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ************************* */
|
|
/* ******* FEATS tab ******* */
|
|
/* ************************* */
|
|
|
|
div.sheet-feats {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: 1%;
|
|
padding: 0em 0.5%;
|
|
|
|
&-border {
|
|
border-radius: 0px;
|
|
color: $black;
|
|
}
|
|
|
|
button[type="roll"] {
|
|
min-height: 1.45em;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Ancestry & Class feats have 3 input */
|
|
label[title*="type"] > input[type="text"]::placeholder,
|
|
label[title*="level"] > input[type="text"]::placeholder {
|
|
text-transform: uppercase;
|
|
text-align: right;
|
|
}
|
|
|
|
div.sheet-column {
|
|
display: inline-block;
|
|
|
|
& > div {
|
|
margin-bottom: 1%;
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
background-color: $white;
|
|
border-bottom: 1px solid $gray;
|
|
|
|
&:nth-child(even) { background-color: $whitish; }
|
|
}
|
|
|
|
&-class-grid { grid-row: 1 / 3; }
|
|
|
|
}
|
|
|
|
/* FEATS DISPLAY GRID */
|
|
div.sheet-repeating-grid-display {
|
|
color: $black;
|
|
grid-column-gap : 1%;
|
|
grid-template-columns: 1fr 10fr 4fr 2fr 1fr;
|
|
margin : 0;
|
|
width : 100%;
|
|
padding: 5px;
|
|
|
|
button[name="act_collapse"] {
|
|
height : 1.5em;
|
|
width : 1.5em;
|
|
opacity : 1; ;
|
|
}
|
|
|
|
span[name="attr_feat_class"],
|
|
span[name="attr_feat_bonus"],
|
|
span[name="attr_feat_general"],
|
|
span[name="attr_feat_ancestry"],
|
|
span[name="attr_feat_class"] {
|
|
grid-column: 2;
|
|
height: 1.5em;
|
|
font-variant: small-caps;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span[name="attr_feat_skill"],
|
|
span[name="attr_feat_general"] {
|
|
grid-column: 2 / 4;
|
|
}
|
|
|
|
span[name*="type"],
|
|
span[name*="level"] {
|
|
text-align: right;
|
|
}
|
|
|
|
span[name="attr_feat_bonus"] {
|
|
grid-column: 2 / 5;
|
|
}
|
|
|
|
.sheet-collapse {
|
|
font-size: 9pt;
|
|
border-color: $reddish;
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
/* FEATS SETTINGS GRID */
|
|
div.sheet-feats-repeating-grid {
|
|
grid-template-columns: 10fr 4fr 2fr;
|
|
padding-top: 0%;
|
|
|
|
input[data-i18n-title*="type"],
|
|
input[data-i18n-title*="level"] {
|
|
text-align: right;
|
|
}
|
|
|
|
label[data-i18n-title*="description"],
|
|
label[data-i18n-title="bonus_feat"] {
|
|
grid-column: 1 / 4;
|
|
}
|
|
|
|
span[name="attr_feat_ancestry_type"],
|
|
span[name="attr_feat_ancestry_level"] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
label[data-i18n-title="skill_feat"],
|
|
label[data-i18n-title="general_feat"] {
|
|
grid-column: 1 / 3;
|
|
}
|
|
}
|
|
|
|
div.sheet-feats-ancestry-grid button[type="roll"],
|
|
div.sheet-feats-class-grid button[type="roll"] {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
div.sheet-feats-skill-grid button[type="roll"],
|
|
div.sheet-feats-general-grid button[type="roll"] {
|
|
grid-column: 1 / 4;
|
|
}
|
|
|
|
div.sheet-feats-bonus-grid button[type="roll"] {
|
|
grid-column: 1 / 5;
|
|
}
|
|
|
|
/* ************************* */
|
|
/* ***** Inventory tab ***** */
|
|
/* ************************* */
|
|
|
|
/* Inventory */
|
|
|
|
div.sheet-inventory {
|
|
padding: 0em 0.5%;
|
|
|
|
button[type="roll"] {
|
|
min-height: 1.4em;
|
|
text-align: left;
|
|
}
|
|
|
|
h1 {
|
|
grid-column: 1 / -1;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Bulk */
|
|
div.sheet-bulk-circle {
|
|
height : 5em;
|
|
margin : auto;
|
|
width : 5em;
|
|
}
|
|
|
|
div.sheet-inv-top-row {
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: 1fr 2.5fr 2.5fr 1fr 1fr 1fr 1fr;
|
|
margin: 1%;
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-column,
|
|
div.sheet-inv-half-col {
|
|
background-color: $white;
|
|
}
|
|
|
|
div.sheet-column {
|
|
margin-bottom: 2%;
|
|
width: 49.78%;
|
|
}
|
|
|
|
span.sheet-inv-bulk {
|
|
color: $black;
|
|
}
|
|
|
|
div.sheet-settings {
|
|
label {
|
|
span {
|
|
font-size: 0.7em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Encumbered Base & Maximum Base */
|
|
div.sheet-encumbered {
|
|
color : $white;
|
|
background-color: $reddish;
|
|
grid-template-columns: 1.5fr 3fr 4fr 1fr 1fr;
|
|
align-items: center;
|
|
padding: 5px;
|
|
border-radius: 15px;
|
|
|
|
h2 {
|
|
color : $white;
|
|
font-size : 1em;
|
|
grid-column : 1 / 5;
|
|
grid-row : 1;
|
|
text-align : center;
|
|
text-transform: uppercase;
|
|
line-height: 2em;
|
|
}
|
|
|
|
div.sheet-circle {
|
|
height: 2.5em;
|
|
width: 2.5em;
|
|
padding: 10% 1%;
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
span.sheet-center {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
div.sheet-dcbase {
|
|
align-items: center;
|
|
font-size: 1em;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
span[name*="base"]{
|
|
height: 1.5em;
|
|
margin: auto;
|
|
width: 1.5em;
|
|
}
|
|
|
|
label[data-i18n-title="strength_modifier_display"] {
|
|
text-align : center;
|
|
font-size: 8pt;
|
|
padding: 0px 10%;
|
|
|
|
span {
|
|
display: block;
|
|
&:last-child {
|
|
background-color: $brownred;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
span.sheet-title {
|
|
line-height: 1em;
|
|
}
|
|
|
|
span.sheet-value {
|
|
background-color: $brownred;
|
|
font-size: 1.5em;
|
|
line-height: 1.4em;
|
|
margin-top: 5%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* Coins circles section */
|
|
div.sheet-coins {
|
|
position: relative;
|
|
|
|
h2 {
|
|
position : absolute;
|
|
left : calc(50% - 20px);
|
|
top : 35px;
|
|
background-color : $reddish;
|
|
border-bottom-left-radius : 40%;
|
|
border-bottom-right-radius: 40%;
|
|
color : $white;
|
|
padding-top : 5px;
|
|
height : 35px;
|
|
width : 40px;
|
|
margin : auto;
|
|
text-align : center;
|
|
text-transform : uppercase;
|
|
}
|
|
|
|
input[type="text"].sheet-circle {
|
|
position : absolute;
|
|
left : calc(50% - 1.5em);
|
|
background-color: $white;
|
|
border : 3px solid $reddish;
|
|
border-radius : 50%;
|
|
font-weight : bold;
|
|
height : 3em;
|
|
text-align : center;
|
|
width : 3em;
|
|
font-size: 12pt;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
/* Sheet display grid */
|
|
div.sheet-inv-display-grid {
|
|
grid-template-columns: 4fr 1.5fr 0.5fr 1fr 0.5fr;
|
|
padding: 0.25em 0em;
|
|
|
|
&:first-child {
|
|
background: $focusblue;
|
|
color: $white;
|
|
padding: 0.5em;
|
|
font-size: 7pt;
|
|
align-items: center;
|
|
}
|
|
|
|
button[type="roll"] {
|
|
grid-column: 1 / 3;
|
|
}
|
|
|
|
h2 {
|
|
line-height: 1.5em;
|
|
text-align: center;
|
|
|
|
&[data-i18n="readied_items"],
|
|
&[data-i18n="other_items"] {
|
|
grid-column: 1 / 3;
|
|
}
|
|
}
|
|
|
|
input[name*="quantity"] {
|
|
margin-left: 15%;
|
|
}
|
|
|
|
&:first-child h2:first-child {
|
|
font-family: serif;
|
|
font-size: 12pt;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
label.sheet-inv-notes {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
span {
|
|
@extend %center-text;
|
|
}
|
|
|
|
span.sheet-inv-name {
|
|
text-align: left;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
span.sheet-inv-notes {
|
|
font-size: 9pt;
|
|
text-align: left;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
&.sheet-display-grid-other span.sheet-inv-name {
|
|
grid-column: 1 / 3;
|
|
}
|
|
}
|
|
|
|
/* Inventory columns of Readied Items and Other Items */
|
|
div.sheet-worn-items {
|
|
min-height: 162px;
|
|
|
|
button[type="roll"] {
|
|
grid-column: 1 / 2;
|
|
}
|
|
}
|
|
|
|
|
|
div.sheet-item-repeating-grid {
|
|
grid-template-columns: 4fr 1.5fr 1fr 0.5fr;
|
|
|
|
label.sheet-inv-name,
|
|
label.sheet-inv-invest,
|
|
label.sheet-inv-bulk {
|
|
grid-row: 1
|
|
}
|
|
|
|
label.sheet-inv-name input {
|
|
padding-left: 1%;
|
|
}
|
|
|
|
label.sheet-inv-invest input,
|
|
label.sheet-inv-bulk input,
|
|
label.sheet-inv-invest,
|
|
label.sheet-inv-bulk {
|
|
@extend %center-text;
|
|
}
|
|
|
|
label.sheet-inv-notes { grid-area: 2 / 1 / 2 / 5; }
|
|
}
|
|
|
|
div.sheet-inv-half-col div.sheet-settings {
|
|
label.sheet-inv-name { grid-column: 1 / 3; }
|
|
label.sheet-inv-bulk { grid-column: 3; }
|
|
}
|
|
|
|
/* ************************* */
|
|
/* ******** Spells tab ***** */
|
|
/* ************************* */
|
|
|
|
@import "src/scss/_spells";
|
|
|
|
/**********************************************************************************************************/
|
|
/********************* Show & Hide Settings ***************************/
|
|
/********************************************************************************************************/
|
|
/* Show and hide PC tabs */
|
|
div.sheet-npc,
|
|
div.sheet-character,
|
|
div.sheet-details,
|
|
div.sheet-feats,
|
|
div.sheet-inventory,
|
|
div.sheet-spells,
|
|
div.sheet-options,
|
|
input[name="attr_sheet_type"][value*="npc"] ~ div.sheet-pc-info,
|
|
input[name="attr_sheet_type"][value*="npc"] ~ div.sheet-tabs label:nth-of-type(1n+2) {
|
|
@extend %display-none;
|
|
}
|
|
|
|
%show-hide,
|
|
input[name="attr_sheet_type"][value*="npc"] ~ input[name="attr_toggles"][value*="npcspellcaster"] ~ div.sheet-spells {
|
|
display: grid;
|
|
}
|
|
|
|
input[name="attr_sheet_type"][value*="npc"] ~ div.sheet-npc {
|
|
@extend %show-hide;
|
|
}
|
|
|
|
@each $tab in $tabArray {
|
|
input[name="attr_sheet_type"][value*="#{$tab}"] ~ div.sheet-#{$tab} {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
/* Hide the Settings section by setting the height to 0 */
|
|
div.sheet-settings,
|
|
span.sheet-collapse {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
overflow : hidden;
|
|
height : 0;
|
|
padding : 0;
|
|
|
|
transition : all .5s;
|
|
-webkit-transition: all .5s; /* Safari */
|
|
|
|
border-left: 5px solid $darkblue;
|
|
background-color: hsla(0, 0%, 0%, 0.3);
|
|
color: $black;
|
|
}
|
|
|
|
/* Adjusts looks on a section relying on .sheet.settings for expand/collapse */
|
|
div.sheet-details div.sheet-notes div.sheet-settings{
|
|
border-left: none;
|
|
background-color: $browntan;
|
|
}
|
|
|
|
div.sheet-settings::before {
|
|
display: block;
|
|
height: 0;
|
|
width: 0;
|
|
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: 50%;
|
|
top: -10px;
|
|
|
|
content: "";
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: -5px;
|
|
|
|
border: none;
|
|
border-bottom: 10px solid hsla(0, 0%, 0%, 0.3);
|
|
border-right: 10px solid transparent;
|
|
border-left: 10px solid transparent;
|
|
}
|
|
|
|
/* Show the Settings section by adding a height if the hidden input contains the keyword */
|
|
div.sheet-repeating input.sheet-toggles[value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="perception"] ~ div.sheet-character div.sheet-column div.sheet-perception > div.sheet-settings,
|
|
input[name="attr_toggles"][value*="notes"] ~ div.sheet-details div.sheet-notes div.sheet-notes-settings,
|
|
div.sheet-feats div.sheet-repeating-details input.sheet-toggles[value*="settings"] ~ div.sheet-settings,
|
|
input.sheet-toggles[value*="settings"] ~ div.sheet-settings {
|
|
height: auto;
|
|
}
|
|
|
|
input[name="attr_toggles"][value*="details"] ~ div.sheet-details {
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
%toggle-height-auto,
|
|
input[name="attr_toggles"][value*="class_dc"] ~ div.sheet-character div.sheet-classdc div.sheet-settings,
|
|
input[name="attr_toggles"][value*="shield"] ~ div.sheet-character div.sheet-armorclass div.sheet-shield-grid div.sheet-settings,
|
|
input[name="attr_toggles"][value*="armor_class"] ~ div.sheet-character div.sheet-armorclass div.sheet-armorclass-main div.sheet-settings,
|
|
input[name="attr_toggles"][value*="hitpoints"] ~ div.sheet-character div.sheet-hitpoints div.sheet-settings,
|
|
input[name="attr_toggles"][value*="spell_attack"] ~ div.sheet-spells div.sheet-column div.sheet-spellattack div.sheet-settings,
|
|
input[name="attr_toggles"][value*="spell_dc"] ~ div.sheet-spells div.sheet-column div.sheet-spelldc div.sheet-settings,
|
|
div.sheet-skills input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
div.sheet-inv-col input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="saving_throws"] ~ div.sheet-character div.sheet-savingthrows div.sheet-settings {
|
|
height: auto;
|
|
}
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-display span.sheet-collapse {
|
|
@extend %toggle-height-auto;
|
|
}
|
|
@each $class in "repeating-grid", "repeating-grid-display", "repeating-spell-display", "inv-display-grid" {
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-#{$class} span.sheet-collapse {
|
|
@extend %toggle-height-auto;
|
|
}
|
|
}
|
|
|
|
%toggles-value-settings,
|
|
div.sheet-repeating input.sheet-toggles[value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="perception"] ~ div.sheet-character div.sheet-column div.sheet-perception > div.sheet-settings,
|
|
input.sheet-toggles[value*="settings"] ~ div.sheet-settings,
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-grid span.sheet-collapse,
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-grid-display span.sheet-collapse,
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-spell-display span.sheet-collapse,
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-repeating-inv-display span.sheet-collapse,
|
|
input[name="attr_toggles"][value*="class_dc"] ~ div.sheet-character div.sheet-classdc div.sheet-settings,
|
|
input[name="attr_toggles"][value*="shield"] ~ div.sheet-character div.sheet-armorclass div.sheet-shield-grid div.sheet-settings,
|
|
input[name="attr_toggles"][value*="spell_attack"] ~ div.sheet-spells div.sheet-column div.sheet-spellattack div.sheet-settings,
|
|
input[name="attr_toggles"][value*="armor_class"] ~ div.sheet-character div.sheet-armorclass div.sheet-armorclass-main div.sheet-settings,
|
|
input[name="attr_toggles"][value*="spell_dc"] ~ div.sheet-spells div.sheet-column div.sheet-spelldc div.sheet-settings,
|
|
input[name="attr_toggles"][value*="hitpoints"] ~ div.sheet-character div.sheet-hitpoints div.sheet-settings,
|
|
input[name="attr_toggles"][value*="notes"] ~ div.sheet-details div.sheet-notes div.sheet-notes-settings,
|
|
div.sheet-skills input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
div.sheet-inv-col input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
input[name="attr_toggles"][value*="saving_throws"] ~ div.sheet-character div.sheet-savingthrows div.sheet-settings,
|
|
div.sheet-strikes.sheet-melee input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings,
|
|
input.sheet-toggles[value*="collapse"] ~ div.sheet-inv-display-grid span.sheet-collapse {
|
|
padding: 5px;
|
|
overflow: visible;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@each $attribute in $attributes {
|
|
input[name="attr_toggles"][value*="#{$attribute}"] ~ div.sheet-character div.sheet-column div.sheet-ability-scores div.sheet-#{$attribute}-settings {
|
|
@extend %toggle-height-auto;
|
|
}
|
|
|
|
input[name="attr_toggles"][value*="#{$attribute}"] ~ div.sheet-character div.sheet-column div.sheet-ability-scores div.sheet-#{$attribute}-settings {
|
|
@extend %toggles-value-settings;
|
|
}
|
|
}
|
|
|
|
@each $skill in $skills {
|
|
input[name="attr_toggles"][value*="#{$skill}"] ~ div.sheet-character div.sheet-skills div.sheet-#{$skill}-settings {
|
|
@extend %toggle-height-auto;
|
|
}
|
|
|
|
input[name="attr_toggles"][value*="#{$skill}"] ~ div.sheet-character div.sheet-skills div.sheet-#{$skill}-settings {
|
|
@extend %toggles-value-settings;
|
|
}
|
|
}
|
|
|
|
div.sheet-strikes input[name="attr_toggles"][value*="settings"] ~ div.sheet-settings {
|
|
height: auto;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
|
|
/****************************************************************************************************/
|
|
/********************* Styled Checkboxes ***************************/
|
|
/**************************************************************************************************/
|
|
|
|
/* This is the hidden input */
|
|
|
|
input[type="checkbox"] {
|
|
height : 15px;
|
|
width : 15px;
|
|
}
|
|
|
|
/* The switch - the box around the slider */
|
|
.sheet-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.sheet-switch 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;
|
|
}
|
|
|
|
.sheet-slider:before {
|
|
-webkit-transition: .4s;
|
|
background-color: $prettyred;
|
|
border-radius: 50%;
|
|
bottom: 4px;
|
|
content: "";
|
|
height: 16px;
|
|
left: 4px;
|
|
position: absolute;
|
|
transition: .4s;
|
|
width: 16px;
|
|
}
|
|
|
|
input:checked + .sheet-slider {
|
|
background-color: $reddish;
|
|
}
|
|
|
|
input:focus + .sheet-slider { box-shadow: 0 0 1px black; }
|
|
|
|
input:checked + .sheet-slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
|
|
|
|
/****************************************************************************************************/
|
|
/********************* OPTIONS ***************************/
|
|
/**************************************************************************************************/
|
|
|
|
div.sheet-options {
|
|
h3 {
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
label {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
div.sheet-options-wrapper {
|
|
display: inline;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
max-height: 800px;
|
|
|
|
div.sheet-options-panel {
|
|
background: $graylike;
|
|
border: 2px dotted $white;
|
|
color: $black;
|
|
flex: 0 0 calc(33% - 5px);
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
max-width: calc(33% - 5px);
|
|
padding: 5px;
|
|
|
|
& > * {
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*************************** FOOTER ***************************/
|
|
div.sheet-footer {
|
|
font-size : 0.8em;
|
|
line-height: 15px;
|
|
margin-top : 1em;
|
|
text-align : center;
|
|
}
|
|
|
|
|
|
/*************************** REPEATING SECTIONS *********************/
|
|
@import "src/scss/_repeatingsections";
|
|
|
|
|
|
/*************************** 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;}
|
|
|
|
|
|
/*************************** NPC ***************************/
|
|
@import "src/scss/_npc";
|
|
|
|
|
|
/*************************** Color Scheme ***************************/
|
|
@import "src/scss/_color_schemes";
|