495 lines
12 KiB
SCSS
495 lines
12 KiB
SCSS
// SASS Var
|
|
$url: "https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/cepheus-atom/";
|
|
// url("#{$url}bg.png")
|
|
|
|
// ------------------------------------------------
|
|
// #GENERAL
|
|
// ------------------------------------------------
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Special+Elite|Fredericka+the+Great|Anton&display=swap');
|
|
|
|
.charsheet {
|
|
|
|
h1, h3, label, span, div{
|
|
font-family: "Fredericka the Great";
|
|
font-weight: bold;
|
|
}
|
|
// --------- Text -------------
|
|
|
|
label, div, span, button[type="roll"] {
|
|
text-transform: capitalize;
|
|
flex-grow: 0;
|
|
align-self: center;
|
|
}
|
|
div, span, label{
|
|
flex-shrink: 1;
|
|
}
|
|
h3{
|
|
margin: 0.4em;
|
|
}
|
|
textarea, input[type="number"], input[type="text"], select, option{
|
|
display: flex;
|
|
flex-grow: 6;
|
|
flex-shrink: 1;
|
|
align-self: center;
|
|
font-family: "Special Elite";
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
label{
|
|
padding-left: 15px;
|
|
padding-top: 5px;
|
|
text-align: center;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.dirtyborder{
|
|
border-width: 3px;
|
|
border-image-source: url("#{$url}img-noise.png");
|
|
border-image-slice: 4% 5% 13;
|
|
filter: invert(100%) sepia(93%);
|
|
* {
|
|
all: inherit;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
|
|
// --------- Inputs -------------
|
|
|
|
input[type="text"]{
|
|
font-size: 1.1em;
|
|
}
|
|
input[type="text"],
|
|
input[type="number"]{
|
|
background-color: transparent;
|
|
border-style: none none solid none;
|
|
border-color: black;
|
|
border-radius: 0px;
|
|
width: fit-content;
|
|
padding: 2px;
|
|
margin: auto 5px 5px 5px;
|
|
max-height: 50px;
|
|
|
|
}
|
|
|
|
input[type="number"]{
|
|
text-align: center;
|
|
}
|
|
|
|
textarea {
|
|
background-color: transparent;
|
|
width: 95%;
|
|
height: max-content;
|
|
}
|
|
|
|
input[type="checkbox"].checkbox {
|
|
border-style: solid black;
|
|
border-radius: 0px;
|
|
height: auto;
|
|
}
|
|
|
|
textarea:focus,
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus{
|
|
background-color: hsla(0.0, 15.2%, 75.5%, 1.0);
|
|
}
|
|
|
|
textarea.warn-missing:placeholder-shown,
|
|
input[type="text"].warn-missing:placeholder-shown,
|
|
input[type="number"].warn-missing:placeholder-shown {
|
|
background-color: #EAC9D1;
|
|
}
|
|
|
|
// -----Hides up/down buttons on numberfields that don't need them ---
|
|
|
|
input[type=number].txtfield::-webkit-inner-spin-button,
|
|
input[type=number].txtfield::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number].txtfield {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
// ------- Buttons ----------
|
|
button[type=roll], button[type=roll].d6, button[type=roll].blank {
|
|
text-shadow: none;
|
|
background-position: 0 -60px;
|
|
background-color: #d9d9d9;
|
|
border: 3px none;
|
|
}
|
|
button[type=roll].blank::before {
|
|
content: '';
|
|
height: min-content;
|
|
text-align: center;
|
|
}
|
|
button[type=roll].d6::before {
|
|
font-family: 'dicefontd6';
|
|
content: 'F ';
|
|
text-transform: none;
|
|
}
|
|
|
|
button[type=roll].sendtext::before { // sets icon to speech bubble
|
|
font-family: 'Pictos';
|
|
content: 'w ';
|
|
color: black;
|
|
text-transform: none;
|
|
}
|
|
button[type=roll].d6:hover, button[type=roll].blank:hover, button[type=roll]:hover{
|
|
border: 2px solid black;
|
|
background-color: #80550f;
|
|
//border-radius: 10px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
//-----------------------------------------------------------------
|
|
// #SECTIONS
|
|
// -----------------------------------------------------------------
|
|
|
|
|
|
// --------- General Section Styling -------------
|
|
section, .section{
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items:center;
|
|
justify-content: space-around;
|
|
align-content: space-around;
|
|
}
|
|
.border{
|
|
border: solid 2px black;
|
|
padding: 2px;
|
|
}
|
|
|
|
.flex{
|
|
&-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&-middle {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
&-col {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
&-row {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
}
|
|
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: 3fr 100px 4fr 3fr;
|
|
grid-template-rows: 1fr 1.5fr 1.5fr 2fr;
|
|
grid-template-areas:"name name name skills"
|
|
"general general equip skills"
|
|
"mutation mutation combat combat"
|
|
"mutation mutation notes notes ";
|
|
grid-gap: 4px;
|
|
width: 825px;
|
|
height: 900px;
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
section.name{
|
|
grid-area: name;
|
|
align-items: start;
|
|
padding: 5px;
|
|
|
|
input[type="checkbox"]{
|
|
height: auto;
|
|
transform: scale(1.1);
|
|
}
|
|
:is(input[type="text"] input[type="number"] span) {
|
|
font-size: 1.1em;
|
|
}
|
|
.pad{
|
|
padding: 8px;
|
|
}
|
|
h1{
|
|
margin-top: 5px;
|
|
|
|
span{
|
|
text-transform: uppercase;
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|
|
.flex-row.name{
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
}
|
|
.desc{
|
|
width: 100%;
|
|
span{
|
|
align-self: start;
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
.atom{
|
|
font-family: Pictos Three;
|
|
content: "l";
|
|
font-size: 54px;
|
|
width: 51px;
|
|
height: 50px;
|
|
text-transform: none;
|
|
padding-top: 10px;
|
|
padding-left: 5px;
|
|
transform: scale(-1, 1);
|
|
}
|
|
|
|
section.general{
|
|
grid-area: general;
|
|
flex-flow: nowrap column;
|
|
:is(div span textarea input[type="text"]){
|
|
width: auto;
|
|
flex-shrink: 1;
|
|
}
|
|
input[type="text"].geno{
|
|
width: 117px;
|
|
}
|
|
input[type="checkbox"]{
|
|
align-self: center;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.flex-row{
|
|
justify-content: space-around;
|
|
width: 100%
|
|
}
|
|
|
|
input[type="radio"]{
|
|
opacity: 0;
|
|
height: 27px;
|
|
width: 27px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
input + span {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 2em;
|
|
height: 2em;
|
|
background: black;
|
|
padding-top: 3px;
|
|
text-align: center;
|
|
color: wheat;
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
line-height: 2;
|
|
border: 3px solid burlywood;
|
|
border-image-source: url("#{$url}img-noise.png");
|
|
border-image-slice: 16% 6% 13;
|
|
filter: invert(100%) sepia(93%);
|
|
}
|
|
|
|
input:checked + span {
|
|
background: white;
|
|
opacity: 1;
|
|
color: black;
|
|
}
|
|
}
|
|
input[type="number"].lifeblood{
|
|
width: 2.3em;
|
|
}
|
|
.contam-row{
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
|
|
section.skills{
|
|
grid-area: skills;
|
|
|
|
label{
|
|
font-size: 2.2em;
|
|
}
|
|
.flex-row{
|
|
width: 90%;
|
|
input{
|
|
width: 2.2em;
|
|
margin: 0 10px;
|
|
border: 4px solid black;
|
|
border-radius: 22px;
|
|
font-size: 1.4em;
|
|
padding: 6px 6px 3px 6px;
|
|
flex-grow: 0;
|
|
border-image-source: url("#{$url}img-noise.png");
|
|
border-image-slice: 16% 6% 13;
|
|
filter: invert(100%) sepia(93%);
|
|
color: white;
|
|
|
|
&:focus{
|
|
color: black;
|
|
}
|
|
&.warn-missing:placeholder-shown{
|
|
background-color: #a9999d;
|
|
}
|
|
}
|
|
button{
|
|
width: 108px;
|
|
font-size: 1.6em;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
section.combat{
|
|
grid-area: combat;
|
|
justify-content: start;
|
|
gap: 10px;
|
|
|
|
.flex-row.section{
|
|
margin-top: 0.3em;
|
|
button{
|
|
height: 20px;
|
|
}
|
|
}
|
|
div.armor{
|
|
input.name{
|
|
width: 120px;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
div.grid-weapon{
|
|
display: grid;
|
|
grid-template-columns: 30px 105px 74px 50px auto;
|
|
grid-template-rows: 25px 1fr 1fr 1fr 1fr 1fr;
|
|
grid-gap: 5px;
|
|
grid-row-gap: 7px;
|
|
//flex-grow: 1;
|
|
width: 494px;
|
|
|
|
* {
|
|
font-size: 1.3em;
|
|
}
|
|
span{
|
|
width: 70px;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
justify-self: center;
|
|
font-weight: bold;
|
|
}
|
|
button{
|
|
width: 18px;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
input[type="text"].weapon-name{
|
|
width: 105px;
|
|
}
|
|
input[type="text"].weapon-notes{
|
|
width: 204px;
|
|
}
|
|
input[type="text"].dmg{
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
input[type="text"].range{
|
|
width: 66px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
section.equip{
|
|
grid-area: equip;
|
|
}
|
|
section.notes{
|
|
grid-area: notes;
|
|
}
|
|
section.mutation{
|
|
grid-area: mutation;
|
|
padding: 0.6em;
|
|
justify-content: start;
|
|
|
|
label{
|
|
width: auto;
|
|
}
|
|
}
|
|
.repcontrol[data-groupname="repeating_mutations"] {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
button.repcontrol_edit, button.repcontrol_add{
|
|
font-family: 'Special Elite';
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
.repcontainer[data-groupname="repeating_mutations"] {
|
|
width: 100%;
|
|
|
|
> .repitem{
|
|
display: flex;
|
|
justify-content:center;
|
|
gap: 3px;
|
|
flex-flow: wrap row;
|
|
|
|
.repcontrol_del{
|
|
font-family: 'Pictos';
|
|
font-size: 1.1em;
|
|
padding: 3px 7px 2px;
|
|
}
|
|
.repcontrol_move{
|
|
font-size: 1.3em;
|
|
padding: 3px 7px;
|
|
}
|
|
|
|
input{
|
|
&[type="text"]{
|
|
width: auto;
|
|
font-size: 1.2em;
|
|
border-style: none none solid none;
|
|
border-width: 2px;
|
|
}
|
|
&[type="text"].name{
|
|
width: 70px;
|
|
flex-grow: 2;
|
|
}
|
|
&[type="number"]{
|
|
font-size: 1.3em;
|
|
width: 40px;
|
|
}
|
|
}
|
|
select{
|
|
width: 66px;
|
|
font-size: 1.1em;
|
|
margin-top: 5px;
|
|
margin-bottom: 0px;
|
|
text-align: center;
|
|
height: 35px;
|
|
flex-grow: 2;
|
|
}
|
|
button{
|
|
padding: 5px;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// section.xp{
|
|
// grid-area: xp;
|
|
// display: flex;
|
|
// align-content: flex-start;
|
|
// input[type="checkbox"]{
|
|
// height: 23px;
|
|
// transform: scale(0.8);
|
|
// }
|
|
// span{
|
|
// width: 80px;
|
|
// text-align: center;
|
|
// font-size: 1.7em;
|
|
// }
|
|
// }
|
|
|
|
// i18n-fixes
|
|
// .lang-es div.grid-weapon span.damage{
|
|
// padding-left: 17px;
|
|
// }
|
|
|
|
}
|