mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
vince
facee3bf96
- fixed a type in Saves by adding a missing '}'. - added z-index to quick meni buttons to help with hovering. - updated a source dependencies based npm audit fix.
2210 lines
33 KiB
SCSS
2210 lines
33 KiB
SCSS
$contrail: "Contrail One", sans-serif;
|
|
/* sheet colors */
|
|
$brightblue: #2B3FEA;
|
|
$navyblue: #223297;
|
|
$darkblue: #11194B;
|
|
$headergrey: #9B9B9B;
|
|
$skillgrey: #D3D3D3;
|
|
$lightbox: #F0F0F0;
|
|
$highlightyellow: #FFFF00;
|
|
|
|
/* roll template */
|
|
$arial: "Arial", sans-serif;
|
|
$times: "Times New Roman", serif;
|
|
$rt-red: #ff8080;
|
|
$rt-green: #83db53;
|
|
$rt-blue: #80b0ff;
|
|
$rt-purple: #b291ec;
|
|
$rt-gray: #bababa;
|
|
|
|
/* global styles */
|
|
.charsheet {
|
|
background-color: white;
|
|
padding: 0 !important;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
min-width: 800px;
|
|
color: #000;
|
|
|
|
div, span, label, textarea, button[type=roll], h1, h2, h3 {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
label, .label {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
width: auto;
|
|
display: block;
|
|
border-radius: inherit;
|
|
white-space: normal;
|
|
}
|
|
|
|
p {
|
|
font-size: 1em;
|
|
margin: 0 0 5px;
|
|
line-height: inherit;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
padding: 1px 4px;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
color: #000;
|
|
display: block;
|
|
}
|
|
|
|
input[type=text], input[type=number] {
|
|
padding: 1px 4px;
|
|
font-size: 12px;
|
|
height: 20px;
|
|
color: #000;
|
|
}
|
|
|
|
input[type=number][readonly="readonly"],
|
|
input[type=number].no-spinners {
|
|
-moz-appearance: textfield;
|
|
|
|
&::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
select {
|
|
margin: 0;
|
|
color: #000;
|
|
font-size: 12px;
|
|
padding: 1px 2px;
|
|
line-height: 18px;
|
|
height: 22px;
|
|
}
|
|
|
|
button[type=roll].btn {
|
|
margin: 0
|
|
}
|
|
|
|
button[type=roll].unstyled-button {
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
text-align: inherit;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
font-size: inherit;
|
|
background: transparent;
|
|
|
|
&::before {
|
|
content: ""
|
|
}
|
|
}
|
|
|
|
button[type=roll].invisible-button {
|
|
position: absolute;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
|
|
&:hover ~ div:not(.no-highlight) {
|
|
color: $brightblue;
|
|
border-color: $brightblue;
|
|
}
|
|
}
|
|
|
|
.hider[value="0"] {
|
|
+ div, + label, + button, + span {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.hider[value=""] + button {
|
|
display: none
|
|
}
|
|
|
|
.editmode[value="0"] ~ .content .empty-hider[value=""] + div {
|
|
display: none
|
|
}
|
|
|
|
/* headings */
|
|
h1 {
|
|
font-family: $contrail;
|
|
background-color: $headergrey;
|
|
padding-left: 5px;
|
|
color: #fff;
|
|
font-size: 1.3em;
|
|
line-height: 22px;
|
|
font-weight: normal;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
background-color: $navyblue;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-family: $contrail;
|
|
padding-left: 5px;
|
|
border: 2px solid #000;
|
|
background-color: #ccc;
|
|
color: #000;
|
|
font-size: 1.1em;
|
|
margin: 5px 0;
|
|
width: 175px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2em;
|
|
font-family: $contrail;
|
|
color: #6B6B6B;
|
|
line-height: 1.5;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* tab wrappers and type chooser */
|
|
.npc-input[value="0"] ~ .tabs .npc-tab,
|
|
.npc-input[value="1"] ~ .tabs .pc-tab,
|
|
.npc-input[value="0"] ~ .drones .npc-show,
|
|
.npc-input[value="1"] ~ .drones .pc-show,
|
|
.tab-input:not([value="character"]) ~ .character,
|
|
.tab-input:not([value="ship"]) ~ .ship,
|
|
.tab-input:not([value="drones"]) ~ .drones,
|
|
.tab-input:not([value="npc"]) ~ .npc {
|
|
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-color: $highlightyellow;
|
|
border-style: solid;
|
|
border-width: 0 2px 2px 2px;
|
|
}
|
|
|
|
.header {
|
|
border-bottom: 2px solid $highlightyellow;
|
|
}
|
|
|
|
.tabs {
|
|
border-color: $highlightyellow;
|
|
border-style: solid;
|
|
border-width: 0 2px 0 2px;
|
|
}
|
|
|
|
.settings {
|
|
border-color: $highlightyellow;
|
|
border-style: solid;
|
|
border-width: 0 2px 0 2px;
|
|
}
|
|
|
|
div .edit-button {
|
|
background-color: $highlightyellow;
|
|
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("https://github.com/Roll20/roll20-character-sheets/blob/master/Stars_Without_Number_Revised/Assets/dice.png") 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;
|
|
color: #fff;
|
|
|
|
span {
|
|
padding: 3px 6px
|
|
}
|
|
|
|
input:not(:checked) ~ .pc-label, input:checked ~ .npc-label {
|
|
background: $darkblue
|
|
}
|
|
|
|
input:checked ~ .pc-label, input:not(:checked) ~ .npc-label {
|
|
background: $navyblue
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
input:not(:checked) + span {
|
|
color: #888
|
|
}
|
|
|
|
input:checked + span {
|
|
color: $navyblue
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
font-size: 10px;
|
|
border-top: 1px solid #ccc;
|
|
margin-top: 10px;
|
|
color: #666;
|
|
|
|
button[type="roll"].btn:hover {
|
|
color: $navyblue
|
|
}
|
|
}
|
|
|
|
/* tab environment */
|
|
.tabs {
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 2;
|
|
border-top: 1px solid #333;
|
|
font-family: $contrail;
|
|
flex-flow: row-reverse;
|
|
justify-content: flex-end;
|
|
|
|
input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
|
|
&:checked + span {
|
|
background: $darkblue
|
|
}
|
|
|
|
&:not(:checked) + span {
|
|
background: $navyblue
|
|
}
|
|
}
|
|
|
|
span {
|
|
padding: 1px 25px 0
|
|
}
|
|
|
|
label {
|
|
cursor: pointer;
|
|
line-height: 17px;
|
|
display: flex;
|
|
margin: -1px -10px 0 0;
|
|
color: #fff;
|
|
clip-path: polygon(0 0, 100% 0, 100% 10px, calc(100% - 10px) 100%, 0 100%);
|
|
}
|
|
}
|
|
|
|
/* organisation */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-start {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.grow {
|
|
flex-grow: 1
|
|
}
|
|
|
|
.halfgrid {
|
|
display: grid;
|
|
grid: auto/ 1fr 1fr;
|
|
grid-gap: 5px;
|
|
}
|
|
|
|
.thirdsgrid {
|
|
display: grid;
|
|
grid: auto/ repeat(3, 1fr);
|
|
grid-column-gap: 1%;
|
|
}
|
|
|
|
.column > div:not(:first-child) {
|
|
margin-top: 5px
|
|
}
|
|
|
|
.col-2 {
|
|
grid-column: 2
|
|
}
|
|
|
|
.col-3 {
|
|
grid-column: 3
|
|
}
|
|
|
|
.col-4 {
|
|
grid-column: 4
|
|
}
|
|
|
|
.cols-2 {
|
|
grid-column: span 2
|
|
}
|
|
|
|
.cols-3 {
|
|
grid-column: span 3
|
|
}
|
|
|
|
.cols-4 {
|
|
grid-column: span 4
|
|
}
|
|
|
|
.rows-2 {
|
|
grid-row: span 2
|
|
}
|
|
|
|
.col55 {
|
|
width: 55%
|
|
}
|
|
|
|
.col50 {
|
|
width: 50%
|
|
}
|
|
|
|
.col40 {
|
|
width: 40%
|
|
}
|
|
|
|
.colthird {
|
|
width: calc(100% / 3)
|
|
}
|
|
|
|
.col25 {
|
|
width: 25%
|
|
}
|
|
|
|
.col20 {
|
|
width: 20%
|
|
}
|
|
|
|
.colsixth {
|
|
width: calc(100% / 6)
|
|
}
|
|
|
|
/* containers */
|
|
.grey-box, .grey-box-bordered {
|
|
padding: 4px;
|
|
background: $lightbox;
|
|
}
|
|
|
|
.grey-box-bordered {
|
|
border: 1px solid #aaa
|
|
}
|
|
|
|
.core-box {
|
|
padding: 8px;
|
|
background: $lightbox;
|
|
}
|
|
|
|
.core-box-text {
|
|
padding: 8px 3px 3px 8px;
|
|
background: $lightbox;
|
|
}
|
|
|
|
input[type=text].inherit {
|
|
border-radius: 0;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.inline-input {
|
|
position: relative;
|
|
z-index: 2;
|
|
vertical-align: baseline;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.text-input {
|
|
color: #666;
|
|
padding-right: 5px;
|
|
line-height: 1;
|
|
|
|
.label {
|
|
font-size: .9em;
|
|
text-align: inherit;
|
|
line-height: 14px;
|
|
border-top: 1px solid #AAA;
|
|
|
|
input[type="checkbox"] {
|
|
height: 14px;
|
|
margin: 0 3px 0 0;
|
|
}
|
|
}
|
|
|
|
input[type=text], input[type=number], textarea {
|
|
background: transparent;
|
|
padding: 1px 0;
|
|
width: 100%;
|
|
border-radius: 0;
|
|
color: $navyblue;
|
|
border: none;
|
|
text-align: inherit;
|
|
font-weight: inherit;
|
|
box-shadow: none;
|
|
|
|
&[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 {
|
|
width: 100%;
|
|
height: 20px;
|
|
color: $navyblue;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
&.important {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
&.center {
|
|
text-align: center
|
|
}
|
|
|
|
&.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;
|
|
color: #333;
|
|
}
|
|
|
|
.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;
|
|
color: #333;
|
|
}
|
|
|
|
.label {
|
|
grid-column: 1/7
|
|
}
|
|
}
|
|
|
|
button[type=roll].btn {
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
color: red
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-header {
|
|
font-size: .9em;
|
|
color: #666;
|
|
|
|
.center {
|
|
text-align: center
|
|
}
|
|
|
|
> div {
|
|
padding-left: 2px;
|
|
border-bottom: 1px solid #aaa;
|
|
}
|
|
}
|
|
|
|
.blue-button {
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
|
|
button[type=roll].btn {
|
|
background: $brightblue;
|
|
width: 35px;
|
|
height: 35px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
color: white;
|
|
|
|
&::before {
|
|
content: ""
|
|
}
|
|
}
|
|
}
|
|
|
|
.focusinfo {
|
|
position: relative;
|
|
|
|
.details {
|
|
position: absolute;
|
|
z-index: 1;
|
|
opacity: 1;
|
|
width: 250px;
|
|
top: 22px;
|
|
left: calc(50% - 125px);
|
|
transition: all 0.3s;
|
|
background: #FFF;
|
|
border: 1px solid #777;
|
|
border-radius: 8px;
|
|
padding: 5px;
|
|
}
|
|
|
|
input:not(:focus) ~ .details {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* inline styling */
|
|
.lower {
|
|
text-transform: lowercase
|
|
}
|
|
|
|
.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 {
|
|
font-size: .8em;
|
|
background: $lightbox;
|
|
border-radius: 5px;
|
|
padding: 1px;
|
|
line-height: 1;
|
|
vertical-align: super;
|
|
}
|
|
|
|
/* force repeating row behaviour */
|
|
|
|
.simple-repsection {
|
|
.repitem {
|
|
margin-bottom: 3px
|
|
}
|
|
|
|
textarea {
|
|
margin: 3px 0 0;
|
|
height: 50px;
|
|
}
|
|
|
|
.display {
|
|
.name {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px solid #777;
|
|
}
|
|
|
|
.details {
|
|
line-height: 1.4;
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rep-grid {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-column-gap: 3px;
|
|
margin-bottom: 3px;
|
|
|
|
.text-input {
|
|
padding: 0
|
|
}
|
|
}
|
|
|
|
/* global skill settings */
|
|
.skills-type[value="neither"] ~ div .skills-either,
|
|
.skills-type:not([value="first"]) ~ div .skills-first,
|
|
.skills-type:not([value="revised"]) ~ div .skills-revised,
|
|
.skills-type:not([value="wwn"]) ~ div .skills-wwn,
|
|
.skills-type:not([value="neither"]) ~ div .skills-neither,
|
|
.super-type:not([value="psionics"]):not([value="both"]) ~ div .skills-psionics,
|
|
.super-type:not([value="magic"]):not([value="both"]) ~ div .skills-magic,
|
|
.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 {
|
|
input:not([value*="str"]) ~ .str,
|
|
input:not([value*="dex"]) ~ .dex,
|
|
input:not([value*="con"]) ~ .con,
|
|
input:not([value*="int"]) ~ .int,
|
|
input:not([value*="wis"]) ~ .wis,
|
|
input:not([value*="cha"]) ~ .cha {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.skills-query[value="hover"] ~ div .skill:hover .skills-query-display,
|
|
.skill .display .query:focus + .skills-query-display {
|
|
display: none
|
|
}
|
|
|
|
/* repeating section controls */
|
|
.repcontrol {
|
|
display: flex;
|
|
margin-top: 4px;
|
|
|
|
button {
|
|
padding: 3px 10px
|
|
}
|
|
}
|
|
|
|
.repcontrol_edit {
|
|
order: 1;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.repcontrol button {
|
|
background: $navyblue;
|
|
color: #FFF;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.repcontrol_move, .repcontrol_del {
|
|
padding: 1px 10px
|
|
}
|
|
|
|
.itemcontrol {
|
|
z-index: 100
|
|
}
|
|
|
|
/* 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;
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 100%;
|
|
z-index: 2;
|
|
right: 0;
|
|
opacity: 0;
|
|
|
|
+ h1::after {
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/white_arrow.svg")
|
|
}
|
|
|
|
&:not(:checked) + h1::after {
|
|
transform: rotate(180deg)
|
|
}
|
|
}
|
|
|
|
+ input + div {
|
|
margin-top: 5px
|
|
}
|
|
}
|
|
|
|
/* Settings */
|
|
.settings {
|
|
label {
|
|
font-weight: bold;
|
|
|
|
span {
|
|
margin-right: 4px
|
|
}
|
|
}
|
|
|
|
select {
|
|
width: 120px;
|
|
display: inline-block;
|
|
|
|
&.wide {
|
|
width: 170px
|
|
}
|
|
}
|
|
}
|
|
|
|
/* generate buttons */
|
|
.generate {
|
|
margin-bottom: 5px;
|
|
|
|
.generate-source {
|
|
height: 20px;
|
|
width: 170px;
|
|
}
|
|
|
|
.generate-info {
|
|
margin: 0 5px;
|
|
min-height: 20px;
|
|
flex-grow: 1;
|
|
background: $lightbox;
|
|
border-radius: 4px;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
.generate-button {
|
|
padding: 1px 8px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
background: #223297;
|
|
color: #FFF;
|
|
|
|
input[type=checkbox] {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:active {
|
|
outline: 5px auto;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Character core */
|
|
.core {
|
|
display: grid;
|
|
grid-column-gap: 5px;
|
|
|
|
&.core-info {
|
|
grid: auto / 2.5fr 1fr .8fr;
|
|
|
|
.info {
|
|
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, .8fr);
|
|
}
|
|
|
|
.main-content {
|
|
margin-top: 3px;
|
|
display: grid;
|
|
grid: auto / repeat(3, 1fr);
|
|
grid-row-gap: 3px;
|
|
|
|
.left-margin {
|
|
margin-left: 15px
|
|
}
|
|
}
|
|
}
|
|
|
|
.strain-above-max[value="1"] ~ div .total-strain {
|
|
color: red;
|
|
}
|
|
|
|
/* Saves */
|
|
.saves .flex {
|
|
margin-top: 4px
|
|
}
|
|
|
|
/* menus */
|
|
.menus-content {
|
|
display: grid;
|
|
grid: auto / 1fr 1fr;
|
|
}
|
|
|
|
.menus button[type=roll].btn {
|
|
color: $brightblue;
|
|
font-size: 1.1em;
|
|
z-index: 2;
|
|
|
|
&:hover {
|
|
color: red
|
|
}
|
|
|
|
.character & {
|
|
margin-right: auto
|
|
}
|
|
}
|
|
|
|
/* Attributes */
|
|
.attributes {
|
|
font-size: 1.1em;
|
|
line-height: 1.2;
|
|
|
|
table {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
td:first-child, .mod {
|
|
font-weight: bold
|
|
}
|
|
|
|
td:not(:first-child) {
|
|
text-align: center
|
|
}
|
|
|
|
input[type=number] {
|
|
width: 45px
|
|
}
|
|
|
|
td:nth-child(2n+3) input[type=number] {
|
|
width: 37px
|
|
}
|
|
|
|
.mod {
|
|
font-size: 1.1em
|
|
}
|
|
}
|
|
|
|
/* 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] {
|
|
width: calc(100% - 8em);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.slash {
|
|
margin: 0 2px
|
|
}
|
|
}
|
|
|
|
/* Shells */
|
|
|
|
.shells {
|
|
.shells-grid {
|
|
grid: auto / 40px 35px 35px 35px 45px 1fr;
|
|
}
|
|
}
|
|
|
|
.transhuman-setting:not([value="transhuman"]) ~ .column .transhuman-enabled {
|
|
display: none
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
.weapon-skill {
|
|
width: 80px
|
|
}
|
|
|
|
.attribute {
|
|
width: 60px
|
|
}
|
|
|
|
.burst {
|
|
width: 65px
|
|
}
|
|
|
|
.damage {
|
|
width: 60px
|
|
}
|
|
|
|
.shock-damage {
|
|
width: 55px
|
|
}
|
|
|
|
.shock-ac {
|
|
width: 55px
|
|
}
|
|
|
|
.skill-to-damage {
|
|
width: 30px
|
|
}
|
|
|
|
.range {
|
|
width: 60px
|
|
}
|
|
|
|
.ammo {
|
|
width: 80px
|
|
}
|
|
|
|
.enc {
|
|
width: 40px
|
|
}
|
|
}
|
|
|
|
.text-input {
|
|
padding-right: 3px
|
|
}
|
|
|
|
.repitem {
|
|
margin-bottom: 3px
|
|
}
|
|
|
|
.display {
|
|
font-size: 1.1em;
|
|
border: 1px solid #888;
|
|
text-indent: -10px;
|
|
padding: 2px 4px 2px 14px;
|
|
|
|
.name {
|
|
font-weight: bold
|
|
}
|
|
}
|
|
|
|
.repitem:nth-child(odd) .display {
|
|
background: $skillgrey
|
|
}
|
|
}
|
|
|
|
/* Skills */
|
|
.skill-container, .skills-repeating .repcontainer {
|
|
display: grid;
|
|
grid: auto / 1fr 1fr;
|
|
grid-gap: 4px 1%;
|
|
}
|
|
|
|
.skill {
|
|
position: relative;
|
|
|
|
.display, .edit {
|
|
border: 1px solid #888;
|
|
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 {
|
|
vertical-align: super;
|
|
margin-left: 2px;
|
|
font-weight: normal;
|
|
font-size: .7em;
|
|
}
|
|
|
|
.query {
|
|
width: 55px;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
position: relative;
|
|
height: 18px;
|
|
z-index: 2;
|
|
margin: 0 2px;
|
|
outline: none;
|
|
color: inherit;
|
|
flex-shrink: 0;
|
|
line-height: 16px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&: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 {
|
|
.display {
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
}
|
|
|
|
.name {
|
|
background: #000;
|
|
color: #fff;
|
|
flex-grow: 0;
|
|
margin-right: auto;
|
|
width: auto;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.edit .level {
|
|
margin: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
.skill-container .skill {
|
|
&:nth-of-type(4n+1), &:nth-of-type(4n+2) {
|
|
background: $skillgrey
|
|
}
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_skills"] .repitem {
|
|
&:nth-of-type(4n+1) .skill, &:nth-of-type(4n+2) .skill {
|
|
background: $skillgrey
|
|
}
|
|
}
|
|
|
|
.skills-type:not([value="neither"]) ~ div .skills-repeating,
|
|
.psionics .skills-repeating, .magic .skills-repeating {
|
|
margin-top: 4px
|
|
}
|
|
|
|
.skill-blurb {
|
|
margin-top: 3px;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* name + desc sections */
|
|
.details-button {
|
|
margin-left: auto;
|
|
font-weight: bold;
|
|
color: #999;
|
|
letter-spacing: 1px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
|
|
input {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
|
|
&:checked + span {
|
|
color: #333
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-details:not([value="1"]) ~ div .details {
|
|
display: none
|
|
}
|
|
|
|
.input-details:not([value="0"]) ~ div .notdetails {
|
|
display: none
|
|
}
|
|
|
|
|
|
/* Supernatural section controls */
|
|
.super-type {
|
|
&:not([value="psionics"]) ~ div .super-psionics-only,
|
|
&:not([value="magic"]) ~ div .super-magic-only,
|
|
&:not([value="both"]) ~ div .super-both,
|
|
&[value="magic"] ~ div .super-psionics,
|
|
&[value="psionics"] ~ div .super-magic,
|
|
&[value="neither"] ~ div .super {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.tab-input:not([value="psionics"]) ~ .psionics,
|
|
.tab-input:not([value="magic"]) ~ .magic {
|
|
display: none
|
|
}
|
|
|
|
|
|
/* Psionics */
|
|
.psionics-effort {
|
|
display: grid;
|
|
grid: auto/ auto 45px 45px 45px 45px 80px;
|
|
align-items: center;
|
|
grid-column-gap: 4px;
|
|
margin-top: 5px;
|
|
|
|
h3 {
|
|
line-height: 1
|
|
}
|
|
}
|
|
|
|
.techniques {
|
|
margin-top: 5px;
|
|
|
|
> .flex-center {
|
|
margin-bottom: 5px
|
|
}
|
|
|
|
.display .discipline {
|
|
margin-left: auto
|
|
}
|
|
|
|
.edit .discipline {
|
|
margin-left: 5px;
|
|
width: 90px;
|
|
}
|
|
}
|
|
|
|
/* Space Magic */
|
|
|
|
.magic-effort {
|
|
display: grid;
|
|
grid: auto/ auto 45px 45px 45px 45px 80px;
|
|
align-items: center;
|
|
grid-column-gap: 4px;
|
|
margin-top: 5px;
|
|
|
|
h3 {
|
|
line-height: 1
|
|
}
|
|
}
|
|
|
|
.spells {
|
|
margin-top: 5px;
|
|
|
|
> .flex-center {
|
|
margin-bottom: 5px
|
|
}
|
|
|
|
> .flex {
|
|
border-bottom: 1px solid #666;
|
|
margin-bottom: 3px;
|
|
|
|
:not(:first-child) {
|
|
text-align: center
|
|
}
|
|
}
|
|
|
|
.edit {
|
|
.name {
|
|
width: 220px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.prepared {
|
|
margin: 0 3px
|
|
}
|
|
|
|
.prepared, .damage {
|
|
width: 60px
|
|
}
|
|
}
|
|
|
|
.display {
|
|
.name {
|
|
padding-bottom: 1px
|
|
}
|
|
|
|
span.prepared {
|
|
margin: 0 4px 0 auto
|
|
}
|
|
|
|
input[type=number].prepared {
|
|
padding: 0 4px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.spell-slots {
|
|
display: grid;
|
|
grid: auto/ auto 55px 55px 55px 55px 55px;
|
|
align-items: center;
|
|
grid-column-gap: 4px;
|
|
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
|
|
}
|
|
}
|
|
|
|
/* 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 {
|
|
display: none
|
|
}
|
|
|
|
.ai-setting[value="ai"] ~ .column .ai-enabled {
|
|
display: block
|
|
}
|
|
|
|
.ai-setting[value="ai"] ~ .core .ai-disabled {
|
|
display: none
|
|
}
|
|
|
|
/* Foci */
|
|
.foci-loc {
|
|
&[value="left"] ~ .column .foci-right,
|
|
&[value="right"] ~ .column .foci-left {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.foci {
|
|
.details-button {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.class-ability {
|
|
position: relative;
|
|
|
|
.edit .name {
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
border-bottom: 1px solid #777;
|
|
}
|
|
|
|
.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 {
|
|
.armor-grid {
|
|
grid: auto / 40px 1fr 40px 75px 35px 35px 70px;
|
|
}
|
|
|
|
.details div, .details label {
|
|
grid-column: 2 / 8;
|
|
}
|
|
|
|
.details .display {
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
.readied-stowed {
|
|
display: grid;
|
|
align-items: center;
|
|
grid: auto / 1fr 60px 60px 80px 80px;
|
|
grid-column-gap: 7px;
|
|
|
|
.input-gear-over[value="1"] + .text-input input:first-child {
|
|
color: red
|
|
}
|
|
}
|
|
|
|
.cyberware {
|
|
h3 {
|
|
margin: 5px 0
|
|
}
|
|
|
|
.edit {
|
|
flex-wrap: wrap;
|
|
|
|
input[type=text] {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
> span {
|
|
margin: 0 3px
|
|
}
|
|
}
|
|
}
|
|
|
|
.equipment {
|
|
.repcontainer[data-groupname="repeating_weapons"] + .repcontrol {
|
|
display: none
|
|
}
|
|
|
|
.gear-grid {
|
|
grid: auto / 35px minmax(130px, 1fr) 2fr 35px 70px 40px;
|
|
}
|
|
|
|
.other h3 {
|
|
margin-bottom: 5px
|
|
}
|
|
|
|
.other-gear {
|
|
height: 100px
|
|
}
|
|
}
|
|
|
|
/* Misc */
|
|
.misc {
|
|
.text-input input {
|
|
padding-left: 2px
|
|
}
|
|
|
|
.repitem {
|
|
margin-bottom: 2px
|
|
}
|
|
|
|
.xp {
|
|
width: 50px
|
|
}
|
|
}
|
|
|
|
.notes {
|
|
margin-top: 5px
|
|
}
|
|
|
|
/* Ship tab */
|
|
.ship-class {
|
|
&[value="fighter"] ~ .section .generate-source {
|
|
.frigate, .cruiser, .capital {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
&[value="frigate"] ~ .section .generate-source {
|
|
.cruiser, .capital {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
&[value="cruiser"] ~ .section .generate-source {
|
|
.capital {
|
|
display: none
|
|
}
|
|
}
|
|
}
|
|
|
|
.ship {
|
|
margin-top: -20px;
|
|
grid: auto/ 4fr 3fr 2fr;
|
|
|
|
.menus {
|
|
h3 {
|
|
line-height: 1
|
|
}
|
|
|
|
button[type=roll].btn {
|
|
line-height: 1
|
|
}
|
|
}
|
|
|
|
.type {
|
|
padding: 5px 8px;
|
|
|
|
h3 {
|
|
line-height: 1
|
|
}
|
|
|
|
select {
|
|
height: 20px;
|
|
width: 80px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.input-color-negative[value^="-"] + .text-input input:first-child {
|
|
color: red
|
|
}
|
|
|
|
.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 {
|
|
color: red;
|
|
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 {
|
|
background: $lightbox;
|
|
padding: 3px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* NPC tab */
|
|
.npc {
|
|
margin-top: -20px;
|
|
grid: auto / 3fr .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
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: grid;
|
|
grid: auto / repeat(5, 1fr) 1.3fr;
|
|
}
|
|
|
|
.npc-hp {
|
|
display: grid;
|
|
grid: auto / 40px 1fr;
|
|
}
|
|
|
|
.individual-hide input[type="checkbox"] {
|
|
margin-right: 2px
|
|
}
|
|
|
|
.npc-rep-header {
|
|
margin: 4px
|
|
}
|
|
|
|
.rolls > :first-child {
|
|
margin-bottom: 5px
|
|
}
|
|
|
|
.npc-checkbox {
|
|
font-size: .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
|
|
}
|
|
|
|
.text-input {
|
|
padding-right: 3px
|
|
}
|
|
|
|
.npc-attacks {
|
|
.edit {
|
|
.name {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.attacks, .ab, .range {
|
|
width: 50px
|
|
}
|
|
|
|
.burst, .damage {
|
|
width: 60px
|
|
}
|
|
|
|
.shock-damage {
|
|
width: 30px
|
|
}
|
|
|
|
.shock-ac {
|
|
width: 40px
|
|
}
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
.edit {
|
|
.name {
|
|
width: 100px
|
|
}
|
|
|
|
.description {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.display {
|
|
text-indent: -10px;
|
|
padding: 4px 8px 4px 18px;
|
|
|
|
.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: 5px 0;
|
|
|
|
.stats {
|
|
display: grid;
|
|
align-content: start;
|
|
grid: auto / repeat(7, 1fr);
|
|
}
|
|
|
|
.fittings {
|
|
.name {
|
|
font-weight: bold;
|
|
|
|
&:not(:empty)::after {
|
|
content: ". "
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-style: italic
|
|
}
|
|
|
|
.display {
|
|
margin-bottom: 3px
|
|
}
|
|
}
|
|
|
|
.fitting-grid {
|
|
grid: auto / .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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Roll templates */
|
|
|
|
.sheet-rolltemplate-swn-default,
|
|
.sheet-rolltemplate-swn-attack,
|
|
.sheet-rolltemplate-swn-skill,
|
|
.sheet-rolltemplate-swn-save {
|
|
margin-left: -41px;
|
|
width: 292px;
|
|
color: #FFF;
|
|
font-family: $arial;
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-withoutavatars & {
|
|
margin-left: -11px
|
|
}
|
|
|
|
.sheet-container .inlinerollresult {
|
|
padding: 0;
|
|
font-family: inherit;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-container {
|
|
min-height: 175px;
|
|
position: relative;
|
|
padding: 18px 20px;
|
|
clip-path: polygon(0 7px, 7px 0, 173px 0, 177px 3px, 281px 3px, 289px 11px, 289px 82px, 100% 87px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 22px 100%, 0 calc(100% - 22px));
|
|
}
|
|
|
|
.sheet-header {
|
|
width: 198px;
|
|
|
|
.sheet-name {
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
height: 13px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: $times;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-title {
|
|
font-size: 14px;
|
|
height: 32px;
|
|
line-height: 16px;
|
|
overflow: hidden;
|
|
font-weight: bold;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.sheet-content {
|
|
position: relative
|
|
}
|
|
|
|
.sheet-rolls .inlinerollresult {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
line-height: 29px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-rolls {
|
|
height: 35px;
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
|
|
.sheet-rollname {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
color: red
|
|
}
|
|
|
|
&[href^="~"] {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-rolltemplate-swn-default {
|
|
.sheet-container {
|
|
background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-black.png") top no-repeat,
|
|
url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
|
|
#0F0F0F;
|
|
}
|
|
|
|
.sheet-name {
|
|
color: $rt-gray
|
|
}
|
|
|
|
.sheet-rollname {
|
|
margin-right: auto
|
|
}
|
|
|
|
.sheet-desc, .sheet-buttons {
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.sheet-info {
|
|
font-style: italic;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
margin: -10px 0 5px;
|
|
|
|
.inlinerollresult {
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-rolltemplate-swn-attack {
|
|
.sheet-container {
|
|
background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-purple.png") top no-repeat,
|
|
url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
|
|
#0F0F0F;
|
|
}
|
|
|
|
.sheet-name {
|
|
color: $rt-purple
|
|
}
|
|
|
|
.sheet-title {
|
|
.inlinerollresult {
|
|
font-size: 1em;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.sheet-damage {
|
|
margin-left: auto
|
|
}
|
|
|
|
.sheet-roll {
|
|
margin-left: 10px
|
|
}
|
|
|
|
.sheet-rolls:not(:first-of-type) {
|
|
margin-top: 5px
|
|
}
|
|
|
|
.sheet-shock {
|
|
font-style: italic;
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sheet-info {
|
|
font-style: italic;
|
|
font-size: 10px;
|
|
|
|
> span:first-child {
|
|
margin-right: 10px
|
|
}
|
|
|
|
.inlinerollresult {
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.sheet-desc {
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.sheet-rolltemplate-swn-skill {
|
|
.sheet-container {
|
|
background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-blue.png") top no-repeat,
|
|
url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
|
|
#0F0F0F;
|
|
}
|
|
|
|
.sheet-name {
|
|
color: $rt-blue
|
|
}
|
|
|
|
.sheet-title {
|
|
.sheet-italic {
|
|
font-style: italic
|
|
}
|
|
|
|
.inlinerollresult {
|
|
font-size: 1em;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.sheet-rollname {
|
|
margin-right: auto
|
|
}
|
|
}
|
|
|
|
.sheet-rolltemplate-swn-save {
|
|
.sheet-container {
|
|
&.sheet-success {
|
|
background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-green.png") top no-repeat,
|
|
url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
|
|
#0F0F0F;
|
|
|
|
.sheet-name {
|
|
color: $rt-green
|
|
}
|
|
}
|
|
|
|
&.sheet-failure {
|
|
background: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-top-red.png") top no-repeat,
|
|
url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Stars_Without_Number_Revised/Assets/rt-bottom.png") bottom no-repeat,
|
|
#0F0F0F;
|
|
|
|
.sheet-name {
|
|
color: $rt-red
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-vs {
|
|
margin: 0 10px
|
|
}
|
|
|
|
.sheet-rollname {
|
|
margin-right: auto
|
|
}
|
|
}
|