mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
1419 lines
22 KiB
SCSS
1419 lines
22 KiB
SCSS
@import "./scss/variables";
|
|
@import "./scss/global";
|
|
@import "./scss/mixins";
|
|
@import "./scss/roll_template";
|
|
@import "./scss/show_hide";
|
|
|
|
.charsheet {
|
|
.hider[value="0"] {
|
|
+ div,
|
|
+ label,
|
|
+ button,
|
|
+ span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hider[value=""] + button {
|
|
display: none;
|
|
}
|
|
|
|
.editmode[value="0"] ~ .content .empty-hider[value=""] + div {
|
|
display: none;
|
|
}
|
|
|
|
.details-button {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.header,
|
|
.settings {
|
|
padding: 10px 5px;
|
|
}
|
|
|
|
/* tab wrappers and type chooser */
|
|
input[name="attr_npc"][value="0"] ~ .tabs .npc-tab,
|
|
input[name="attr_npc"][value="1"] ~ .tabs .pc-tab,
|
|
input[name="attr_npc"][value="0"] ~ .drones .npc-show,
|
|
input[name="attr_npc"][value="1"] ~ .drones .pc-show {
|
|
display: none;
|
|
}
|
|
|
|
$characters: "character", "ship", "drones", "npc", "mount", "vehicle";
|
|
@each $name in $characters {
|
|
input[name="attr_tab"]:not([value="#{$name}"]) ~ .#{$name} {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
min-width: 800px;
|
|
display: grid;
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
/* editmode */
|
|
.editmode[value="0"] ~ .content .edit,
|
|
.editmode[value="0"] ~ .content .repcontrol,
|
|
.editmode[value="1"] ~ .content .display {
|
|
display: none;
|
|
}
|
|
|
|
/** edit mode highlighting **/
|
|
.editmode[value="1"] ~ {
|
|
.content {
|
|
border-style: solid;
|
|
border-width: 0 2px 2px 2px;
|
|
}
|
|
|
|
.header {
|
|
border-bottom: 2px solid;
|
|
}
|
|
|
|
.tabs,
|
|
.settings {
|
|
border-style: solid;
|
|
border-width: 0 2px 0 2px;
|
|
}
|
|
|
|
div .edit-button {
|
|
height: 29px;
|
|
padding: 0 5px 0 5px;
|
|
margin: 0 0 0 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.editmode[value="1"] ~ div .edit-button input {
|
|
align-self: center;
|
|
}
|
|
|
|
/* dice icons */
|
|
.dice-icon {
|
|
background: transparent url($dice) no-repeat 80px 3px !important;
|
|
background-size: 15px 15px !important;
|
|
}
|
|
|
|
/* header */
|
|
.header {
|
|
input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.logo {
|
|
width: 480px;
|
|
}
|
|
|
|
.npc-chooser {
|
|
cursor: pointer;
|
|
margin-left: auto;
|
|
span {
|
|
padding: 3px 6px;
|
|
}
|
|
}
|
|
|
|
.edit-button {
|
|
margin: 0 5px 0 20px;
|
|
}
|
|
|
|
.settings-gear,
|
|
.edit-button {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
//noinspection CssNoGenericFontName | There is no generic to a picture font.
|
|
font-family: pictos;
|
|
}
|
|
}
|
|
|
|
@import "./scss/footer";
|
|
|
|
/* tab environment */
|
|
@import "./scss/tabs";
|
|
|
|
/* organisation */
|
|
@import "./scss/utility";
|
|
|
|
/* containers */
|
|
.grey-box,
|
|
.grey-box-bordered {
|
|
padding: 4px;
|
|
}
|
|
|
|
.grey-box-bordered {
|
|
border: 1px solid;
|
|
}
|
|
|
|
.core-box {
|
|
padding: 8px;
|
|
}
|
|
|
|
.core-box-text {
|
|
padding: 8px 3px 3px 8px;
|
|
}
|
|
|
|
input[type="text"].inherit {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
.inline-input {
|
|
padding: 0 3px;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
z-index: 2;
|
|
}
|
|
|
|
.text-input {
|
|
line-height: 1;
|
|
padding-right: 5px;
|
|
|
|
.label {
|
|
border-top: 1px solid;
|
|
font-size: 0.9em;
|
|
line-height: 14px;
|
|
text-align: inherit;
|
|
|
|
input[type="checkbox"] {
|
|
height: 14px;
|
|
margin: 0 3px 0 0;
|
|
}
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
textarea {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-weight: inherit;
|
|
padding: 1px 0;
|
|
text-align: inherit;
|
|
width: 100%;
|
|
|
|
&[readonly="readonly"] {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
textarea {
|
|
height: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
> input[type="checkbox"] {
|
|
height: 14px;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
select {
|
|
background: transparent;
|
|
border: none;
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
&.important {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
&.duo {
|
|
display: grid;
|
|
text-align: center;
|
|
grid: auto / 3px 1fr 5px 1fr 3px;
|
|
align-items: center;
|
|
align-content: start;
|
|
grid-column-gap: 0;
|
|
|
|
> span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.label {
|
|
grid-column: 1/5;
|
|
}
|
|
}
|
|
|
|
&.trio {
|
|
display: grid;
|
|
text-align: center;
|
|
grid: auto / 3px 1fr 5px 1fr 5px 1fr 3px;
|
|
align-items: center;
|
|
align-content: start;
|
|
grid-column-gap: 0;
|
|
|
|
> span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.label {
|
|
grid-column: 1/7;
|
|
}
|
|
}
|
|
|
|
button[type="roll"].btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.table-header {
|
|
font-size: 0.9em;
|
|
|
|
> div {
|
|
padding-left: 2px;
|
|
border-bottom: 1px solid;
|
|
}
|
|
}
|
|
|
|
.focusinfo {
|
|
position: relative;
|
|
|
|
.details {
|
|
border-radius: 8px;
|
|
border: 1px solid;
|
|
left: calc(50% - 125px);
|
|
opacity: 1;
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 22px;
|
|
transition: all 0.3s;
|
|
width: 250px;
|
|
z-index: 1;
|
|
}
|
|
|
|
input:not(:focus) ~ .details {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* inline styling */
|
|
.space-before::before,
|
|
.space-after::after {
|
|
content: " ";
|
|
}
|
|
|
|
.colon-after::after {
|
|
content: ":";
|
|
}
|
|
|
|
.hide-empty[value=""] + span {
|
|
display: none;
|
|
}
|
|
|
|
.add-plus:not([value^="-"]) + span::before {
|
|
content: "+";
|
|
}
|
|
|
|
.api {
|
|
border-radius: 5px;
|
|
font-size: 0.8em;
|
|
line-height: 1;
|
|
padding: 1px;
|
|
vertical-align: super;
|
|
}
|
|
|
|
/* force repeating row behavior */
|
|
@import "./scss/repeating_sections";
|
|
|
|
/* repeating section controls */
|
|
|
|
/* global settings */
|
|
.skills-query:not([value="hover"]) ~ div .skills-query-hover,
|
|
.skills-query[value="query"] ~ div .skills-query-display,
|
|
.skills-query[value="query"] ~ div .skills-query-ask {
|
|
display: none;
|
|
}
|
|
|
|
.skills-query-display {
|
|
$attrs: "str", "dex", "con", "int", "wis", "cha";
|
|
@each $name in $attrs {
|
|
input:not([value*="#{$name}"]) ~ .#{$name} {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skills-query[value="hover"] ~ div .skill:hover .skills-query-display,
|
|
.skill .display .query:focus + .skills-query-display {
|
|
display: none;
|
|
}
|
|
|
|
/* Section visibility toggling */
|
|
/* In the past, Github hosting didn't seem to work for some reason. Backup url: https://svgshare.com/i/aQ0.svg */
|
|
/* Note: svgshare urls are apparently not stable more than about 3 years. */
|
|
.section-toggle-header {
|
|
position: relative;
|
|
|
|
input {
|
|
cursor: pointer;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
width: 22px;
|
|
z-index: 2;
|
|
|
|
+ h1::after {
|
|
background-image: url($chevron);
|
|
}
|
|
|
|
&:not(:checked) + h1::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
+ input + div {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
/* Settings */
|
|
.settings {
|
|
label {
|
|
font-weight: bold;
|
|
|
|
span {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
select {
|
|
display: inline-block;
|
|
width: 120px;
|
|
|
|
&.wide {
|
|
width: 170px;
|
|
}
|
|
}
|
|
|
|
.subsystems {
|
|
grid: auto / 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
/* Character core */
|
|
.core {
|
|
display: grid;
|
|
grid-column-gap: 5px;
|
|
|
|
&.core-info {
|
|
grid: auto / 2.5fr 1fr 0.8fr;
|
|
|
|
.info {
|
|
align-items: start;
|
|
flex-wrap: wrap;
|
|
padding-right: 3px;
|
|
|
|
.important {
|
|
width: calc(60% - 22px);
|
|
}
|
|
|
|
.level {
|
|
width: 44px;
|
|
}
|
|
|
|
.level-rest {
|
|
width: calc(40% - 22px);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.core-stats {
|
|
grid: auto / minmax(310px, 1.2fr) minmax(260px, 1fr) minmax(220px, 0.8fr);
|
|
}
|
|
|
|
.main-content {
|
|
margin-top: 3px;
|
|
display: grid;
|
|
grid: auto / repeat(3, 1fr);
|
|
|
|
.left-margin {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
button[name="roll_HP"].btn {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
/* Saves */
|
|
.saves .flex {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.saves {
|
|
button[type="roll"].btn {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
}
|
|
|
|
/* menus */
|
|
.menus-content {
|
|
align-items: center;
|
|
display: grid;
|
|
grid: auto / 1fr 1fr;
|
|
}
|
|
|
|
.menus button[type="roll"].btn {
|
|
.character & {
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
/* Attributes */
|
|
.attributes {
|
|
font-size: 1.1em;
|
|
line-height: 1.2;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
|
|
.attr-grid {
|
|
grid-template-columns: 1fr 3.5em 3.5em 20px 3.5em 20px;
|
|
}
|
|
|
|
.attr-display-grid {
|
|
grid-template-columns: 1.5fr repeat(3, 5em);
|
|
}
|
|
|
|
.mod {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
span[name*="_mod"]::before {
|
|
content: "+";
|
|
}
|
|
}
|
|
|
|
/* Resources */
|
|
.editmode[value="0"] ~ .content .resources .repcontainer {
|
|
grid: auto / 1fr 1fr;
|
|
}
|
|
|
|
.resources {
|
|
.credits {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.repcontainer {
|
|
display: grid;
|
|
grid-row-gap: 3px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
margin-right: auto;
|
|
width: calc(100% - 8em);
|
|
}
|
|
|
|
.slash {
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
|
|
.money,
|
|
.wealth {
|
|
textarea {
|
|
height: 100px;
|
|
min-height: 100px;
|
|
}
|
|
}
|
|
|
|
/* Shells */
|
|
|
|
.shells {
|
|
.shells-grid {
|
|
grid: auto / 40px 35px 35px 35px 45px 1fr;
|
|
}
|
|
}
|
|
|
|
.transhuman-setting:not([value="transhuman"]) ~ .column .transhuman-enabled,
|
|
.transhuman-setting[value="transhuman"] ~ .core .transhuman-disabled {
|
|
display: none;
|
|
}
|
|
|
|
/* Weapons */
|
|
.weapons {
|
|
.edit {
|
|
justify-content: space-between;
|
|
padding-right: 1px;
|
|
|
|
.name {
|
|
width: 138px;
|
|
}
|
|
|
|
.ab {
|
|
width: 45px;
|
|
}
|
|
|
|
.ammo,
|
|
.weapon-skill {
|
|
width: 80px;
|
|
}
|
|
|
|
.range,
|
|
.damage,
|
|
.attribute {
|
|
width: 60px;
|
|
}
|
|
|
|
.burst {
|
|
width: 65px;
|
|
}
|
|
|
|
.shock-damage,
|
|
.shock-ac {
|
|
width: 55px;
|
|
}
|
|
|
|
.skill-to-damage {
|
|
width: 30px;
|
|
}
|
|
|
|
.enc {
|
|
width: 40px;
|
|
}
|
|
}
|
|
|
|
.text-input {
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.repitem {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.display {
|
|
font-size: 1.1em;
|
|
border: 1px solid;
|
|
text-indent: -10px;
|
|
padding: 2px 4px 2px 14px;
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Skills */
|
|
.skill-container,
|
|
.skills-repeating .repcontainer {
|
|
display: grid;
|
|
grid: auto / 1fr 1fr;
|
|
grid-gap: 4px 1%;
|
|
}
|
|
|
|
.skill {
|
|
position: relative;
|
|
|
|
.display,
|
|
.edit {
|
|
border: 1px solid;
|
|
padding: 2px 4px;
|
|
height: 100%;
|
|
}
|
|
|
|
.display {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
|
|
.dice[value="3d6d1"] + .name::after {
|
|
content: "3d6";
|
|
}
|
|
|
|
.dice[value="4d6d2"] + .name::after {
|
|
content: "4d6";
|
|
}
|
|
|
|
.name {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.name::after {
|
|
font-size: 0.7em;
|
|
font-weight: normal;
|
|
margin-left: 2px;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.query {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: inherit;
|
|
flex-shrink: 0;
|
|
height: 18px;
|
|
line-height: 16px;
|
|
margin: 0 2px;
|
|
outline: none;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 55px;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&:not(:hover) .display .query:not(:focus) {
|
|
display: none;
|
|
}
|
|
|
|
.skills-query-display {
|
|
margin: 0 3px;
|
|
flex-shrink: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.edit {
|
|
input[type="text"].name {
|
|
width: 100%;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
div.name {
|
|
flex-grow: 1;
|
|
width: 0;
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
.level {
|
|
margin: 0 2px;
|
|
padding: 1px 2px;
|
|
width: 40px;
|
|
}
|
|
|
|
.query {
|
|
width: 50px;
|
|
}
|
|
|
|
.dice {
|
|
width: 35px;
|
|
}
|
|
|
|
&.flex-wrap {
|
|
select,
|
|
input {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.skill-points {
|
|
margin-top: 4px;
|
|
|
|
.display {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
}
|
|
|
|
.name {
|
|
flex-grow: 0;
|
|
margin-right: auto;
|
|
width: auto;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.edit .level {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skill-blurb {
|
|
font-style: italic;
|
|
margin-top: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* name + desc sections */
|
|
.input-details:not([value="0"]) ~ div .notdetails {
|
|
display: none;
|
|
}
|
|
|
|
/* Psionics */
|
|
.psionics-effort {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-column-gap: 4px;
|
|
grid: auto/ auto 45px 45px 45px 45px 80px;
|
|
margin-top: 5px;
|
|
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.techniques {
|
|
.display .discipline {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.edit .discipline {
|
|
margin-left: 5px;
|
|
width: 90px;
|
|
}
|
|
}
|
|
|
|
/* Space Magic */
|
|
|
|
.magic-effort {
|
|
display: grid;
|
|
grid: auto/ auto repeat(4, 45px) 80px;
|
|
align-items: center;
|
|
grid-column-gap: 4px;
|
|
margin-top: 5px;
|
|
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.invoker {
|
|
grid-template-columns: 1fr 50%;
|
|
}
|
|
|
|
.spells {
|
|
.spells-header {
|
|
grid-template-columns: 2fr repeat(3, 1fr);
|
|
}
|
|
|
|
.spell-grid {
|
|
grid-template-columns: 1fr repeat(3, 5em);
|
|
|
|
.damage,
|
|
.level,
|
|
.prepared {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.display {
|
|
.name {
|
|
padding-right: 25px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
span.prepared {
|
|
margin: 0 4px 0 auto;
|
|
}
|
|
|
|
input[type="number"].prepared {
|
|
padding: 0 4px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.spell-slots {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-column-gap: 4px;
|
|
grid: auto/ auto repeat(5, 55px);
|
|
margin-top: 5px;
|
|
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.magic-type {
|
|
&:not([value="adept"]) ~ div .adept,
|
|
&:not([value="magister"]) ~ div .magister,
|
|
&:not([value="arcanist"]) ~ div .arcanist,
|
|
&[value="adept"] ~ div .spellcaster {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.magical-arts {
|
|
.effort-grid {
|
|
grid-template-columns: 3em repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.space-magic,
|
|
.magic {
|
|
.spells .display .name {
|
|
grid-template-columns: 1fr auto auto;
|
|
}
|
|
}
|
|
|
|
/* AI */
|
|
.ai-processing {
|
|
display: grid;
|
|
grid: auto/ auto 45px 45px 45px 45px 80px;
|
|
align-items: center;
|
|
grid-column-gap: 4px;
|
|
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.ai-processing-nodes {
|
|
.nodes-grid {
|
|
grid: auto / 65px 65px 1fr;
|
|
}
|
|
}
|
|
|
|
.ai-setting:not([value="ai"]) ~ .ai-enabled,
|
|
.ai-setting[value="ai"] ~ .core .ai-disabled {
|
|
display: none;
|
|
}
|
|
|
|
.ai-setting[value="ai"] ~ .column .ai-enabled {
|
|
display: block;
|
|
}
|
|
|
|
/* Foci */
|
|
.foci-loc {
|
|
&[value="left"] ~ .column .foci-right,
|
|
&[value="right"] ~ .column .foci-left {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.foci,
|
|
.edge {
|
|
.details-button {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.class-ability {
|
|
position: relative;
|
|
|
|
.edit .name {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
.name,
|
|
.edit textarea,
|
|
.display {
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
.name {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.level {
|
|
margin-left: 3px;
|
|
width: 60px;
|
|
}
|
|
}
|
|
|
|
.display .level {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
/* Gear */
|
|
.armor {
|
|
input[name="attr_armor_active"] {
|
|
left: 35%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.armor-grid {
|
|
grid: auto / 40px 1fr 40px;
|
|
}
|
|
|
|
.details div,
|
|
.details label {
|
|
grid-column: 2 / -1;
|
|
}
|
|
|
|
.details .display {
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
.readied-stowed {
|
|
display: grid;
|
|
align-items: center;
|
|
}
|
|
|
|
.cyberdeck {
|
|
.cyberdeck-grid {
|
|
grid-template-columns: 1fr repeat(4, 40px);
|
|
}
|
|
}
|
|
|
|
.cyberware {
|
|
h3 {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.edit {
|
|
flex-wrap: wrap;
|
|
|
|
> span {
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.name-row {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
.equipment {
|
|
input[name="attr_gear_bundled"] {
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_weapons"] + .repcontrol {
|
|
display: none;
|
|
}
|
|
|
|
.gear-grid {
|
|
grid: auto / 40px minmax(130px, 1fr) 40px 70px 40px;
|
|
}
|
|
|
|
.other h3 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.other-gear {
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
/* Misc */
|
|
.misc {
|
|
.text-input input {
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.repitem {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.goal {
|
|
grid-template-columns: 1fr 15%;
|
|
}
|
|
|
|
.xp {
|
|
width: 50px;
|
|
}
|
|
|
|
.goal-lang,
|
|
.proj-ally {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
|
|
.projects,
|
|
.lifestyle {
|
|
.name {
|
|
grid-template-columns: 1fr 15%;
|
|
}
|
|
}
|
|
|
|
.allies {
|
|
.subheaders {
|
|
grid-template-columns: 2fr 1.5fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Ship tab */
|
|
.ship {
|
|
margin-top: -20px;
|
|
grid: auto/ 4fr 3fr 2fr;
|
|
|
|
.menus {
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
|
|
button[type="roll"].btn {
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.type {
|
|
padding: 5px 8px;
|
|
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
|
|
select {
|
|
background: transparent;
|
|
height: 20px;
|
|
width: 80px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex-wrap: wrap;
|
|
|
|
.text-input {
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
|
|
.data {
|
|
display: grid;
|
|
grid: auto / repeat(6, 1fr);
|
|
|
|
.text-input,
|
|
.text-input input[type="number"] {
|
|
text-align: center;
|
|
}
|
|
|
|
.duo {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
}
|
|
}
|
|
|
|
.trio {
|
|
grid-column-start: 3;
|
|
grid-column-end: 7;
|
|
grid: auto / 0 1fr 5px 1fr 5px 1fr 0;
|
|
}
|
|
|
|
.duo {
|
|
grid: auto / 0 1fr 5px 1fr 0;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid: auto / 1fr 1fr;
|
|
}
|
|
|
|
.repcontainer {
|
|
display: grid;
|
|
grid-row-gap: 3px;
|
|
}
|
|
|
|
.repitem {
|
|
&,
|
|
.edit,
|
|
.display {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.grey-box-bordered {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.ship-weapons {
|
|
.edit {
|
|
.name {
|
|
width: calc(100% - 200px);
|
|
}
|
|
|
|
.damage {
|
|
width: 65px;
|
|
}
|
|
|
|
.duo {
|
|
width: 80px;
|
|
}
|
|
|
|
.qualities {
|
|
width: calc(100% - 195px);
|
|
}
|
|
|
|
.range {
|
|
width: 70px;
|
|
}
|
|
}
|
|
|
|
.display {
|
|
text-indent: -10px;
|
|
padding-left: 14px;
|
|
}
|
|
}
|
|
|
|
.ship-defenses,
|
|
.ship-fitting {
|
|
.edit {
|
|
.name,
|
|
.effect {
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.display {
|
|
text-indent: -10px;
|
|
padding: 2px 4px 2px 14px;
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
.broken {
|
|
width: 50px;
|
|
}
|
|
|
|
.number {
|
|
width: 50px;
|
|
}
|
|
}
|
|
|
|
.display {
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.broken {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.description {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.input-type[value="SHIP"] ~ div .vehicle-type:not(.vehicle-type-ship),
|
|
.input-type[value="MECH"] ~ div .vehicle-type:not(.vehicle-type-mech),
|
|
.input-type[value="VEHICLE"] ~ div .vehicle-type:not(.vehicle-type-custom) {
|
|
display: none;
|
|
}
|
|
|
|
.editmode[value="0"] ~ & {
|
|
.ship-defenses,
|
|
.ship-fitting {
|
|
padding: 3px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* NPC tab */
|
|
.npc {
|
|
grid: auto / 3fr 0.8fr 2.2fr;
|
|
|
|
.input-individual-hide:not([value="1"]) ~ .rolls .individual-hide {
|
|
display: none;
|
|
}
|
|
|
|
.menus {
|
|
h3 {
|
|
line-height: 1;
|
|
}
|
|
|
|
button[type="roll"].btn {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.npc-abilities {
|
|
.name {
|
|
grid-template-columns: 1.5fr 1fr;
|
|
}
|
|
}
|
|
|
|
.individual-hide input[type="checkbox"] {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.npc-rep-header {
|
|
margin: 4px;
|
|
}
|
|
|
|
.rolls > :first-child {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.npc-checkbox {
|
|
font-size: 0.9em;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.repcontainer {
|
|
display: grid;
|
|
grid-gap: 3px;
|
|
}
|
|
|
|
.full-attacks {
|
|
margin: 0 6px 0 auto;
|
|
}
|
|
|
|
.grey-box-bordered {
|
|
padding-right: 1px;
|
|
}
|
|
|
|
.npc-attacks {
|
|
.edit {
|
|
.name {
|
|
grid-template-columns: 2fr repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.display {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
padding: 4px 8px;
|
|
|
|
.range[value="0"] + span {
|
|
display: none;
|
|
}
|
|
|
|
.attacks[value="1"] + span {
|
|
display: none;
|
|
}
|
|
|
|
.attacks {
|
|
text-transform: lowercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
.npc-abilities {
|
|
.npc-checkbox {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.display {
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.description {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Drone tab */
|
|
.drone {
|
|
display: grid;
|
|
grid: 86px 1fr / 1fr 1fr;
|
|
grid-gap: 5px;
|
|
align-items: start;
|
|
border-top: 1px solid #555;
|
|
padding: 2px 5px;
|
|
|
|
.name-row {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
|
|
.fittings {
|
|
.name {
|
|
font-weight: bold;
|
|
|
|
&:not(:empty)::after {
|
|
content: ". ";
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-style: italic;
|
|
}
|
|
|
|
.display {
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
|
|
.fitting-grid {
|
|
grid: auto / 0.8fr 1.2fr;
|
|
}
|
|
|
|
.num-fittings {
|
|
&[value="1"],
|
|
&[value="2"],
|
|
&[value="3"],
|
|
&[value="4"] {
|
|
~ .fitting-5 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[value="1"],
|
|
&[value="2"],
|
|
&[value="3"] {
|
|
~ .fitting-4 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[value="1"],
|
|
&[value="2"] {
|
|
~ .fitting-3 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[value="1"] {
|
|
~ .fitting-2 {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.weapon-grid {
|
|
grid: auto / 35px 1fr 50px 60px 35px 70px;
|
|
}
|
|
|
|
.weapon {
|
|
position: relative;
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.display {
|
|
margin-right: 4px;
|
|
|
|
div::after {
|
|
content: ",";
|
|
}
|
|
}
|
|
}
|
|
|
|
.editmode[value="0"] ~ .content & .drone-weapons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
/* Vehicle tab */
|
|
.vehicle {
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
@import "./scss/system_settings";
|
|
}
|
|
|
|
@import "./scss/theme.scss";
|