Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-31 04:02:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fcd1def69752e4e94de164b3d14432b2c2ce0ae8
roll20-character-sheets/Ambition_Avarice/ambition_avarice.css
T

630 lines
12 KiB
CSS
Raw Blame History

/*------------------------------------------------*\
#GENERAL
\*------------------------------------------------*/
/* --------- Text ------------- */
span{
/*overflow: hidden;*/
}
span.sheet-bold{
font-weight: 800;
font-size: medium;
}
label {
margin: 5px 0px 5px 0px;
width: 70px;
text-transform: capitalize;
font-size: 1.1em;
/*overflow: hidden;*/
}
label.sheet-title{
width: 130px;
font-size: 1.3em;
text-align: center;
}
.sheet-short{
width: 50px;
}
/* --------- Inputs ------------- */
input[type="text"] {
background-color: transparent;
border-style: none none solid none;
border-width: 2px;
border-radius: 0px;
border-color: black;
padding: 0px 4px;
margin: 0px 4px;
width: auto;
}
input[type="number"]{
background-color: transparent;
border-style: none none solid none;
border-width: 2px;
border-radius: 0px;
border-color: black;
text-align: center;
width: 40px;
}
textarea {
background-color: transparent;
background-image:
linear-gradient(to right, transparent 5px, transparent 5px),
linear-gradient(to left, transparent 5px, transparent 5px),
repeating-linear-gradient(transparent, transparent 20px, #030303 20px, #000 22px, transparent 21px);
line-height: 21px;
padding: 3px 10px;
border-style: none;
width: 80%;
height: 90%;
margin-bottom: 0px;
}
input[type="checkbox"].sheet-checkbox {
border-style: solid black;
border-radius: 0px;
}
/* highlights empty fields with light gray */
textarea:placeholder-shown,
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown{
background-color: #EAC9D1;
}
/* higlight selected input */
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus{
background-color: #9E9698;
}
/* -----Hides up/down buttons on numberfields that don't need them ---*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=number].sheet-txtfield::-webkit-inner-spin-button,
input[type=number].sheet-txtfield::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number],
input[type=number].sheet-txtfield {
-moz-appearance: textfield;
}
/* dice images */
div.sheet-d20{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png);
background-size: 30px 30px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
div.sheet-d6{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d6.png);
background-size: 30px 30px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
/* ------- Buttons ---------- */
button[type="roll"].sheet-d20:before,
button[type="roll"].sheet-d6:before{
content: ' ';
}
button[type="roll"].sheet-d20:hover,
button[type="roll"].sheet-d6:hover{
background-position: 0;
}
button[type="roll"].sheet-d20{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d20.png);
background-size: 26px 26px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
border-style: none;
background-color: transparent;
margin-left: 5px;
}
button[type="roll"].sheet-d6{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/d6.png);
background-size: 26px 26px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
border-style: none;
background-color: transparent;
margin-left: 5px;
}
/*
button[type="roll"].sheet-d6:before{
font-family: 'dicefontd6';
content: 'f';
}*/
button[type="roll"].sheet-d10:before{
font-family: 'dicefontd10';
content: 'j ';
}
button[type="roll"].sheet-empty:before{
content: ' ';
}
/*-----------------------------------------------------------------*\
#SECTIONS
\*-----------------------------------------------------------------*/
/* --------- General Section Styling ------------- */
.sheet-section {
display: flex;
padding: 5px;
min-height: 90%;
}
.sheet-columnflex {
display: flex;
flex-direction: column;
}
.sheet-rowflex {
display: flex;
flex-direction: row;
}
.sheet-wrap {
flex-wrap: wrap;
}
.sheet-nowrap {
flex-wrap: nowrap;
}
.sheet-center {
align-items: center;
}
.sheet-middle {
justify-content: center;
}
.sheet-spaced {
justify-content: space-evenly;
}
.sheet-note{
margin-top: 5px;
}
/* ------------ Tabs ---------- */
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4
{
display: grid;
}
/* styles tab button */
input.sheet-tab
{
width: 150px;
height: 22px;
position: relative;
top: -26px;
left: 80px;
margin: 5px 0px 5px 0px;
padding: 0px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
input.sheet-tab + span::before
{
content: attr(title);
width: 150px;
height: 22px;
position: absolute;
top: 50px;
left: 110px;
border: solid 2px grey;
border-radius: 13px;
padding-bottom: 2px;
text-align: center;
font-size: 18px;
display: inline-block;
background: white;
}
input.sheet-tab:checked + span::before
{
background: #e5e5e5;
}
input.sheet-tab2 + span::before
{
left: 263px;
}
input.sheet-tab3 + span::before
{
left: 415px;
}
input.sheet-tab4 + span::before
{
left: 570px;
}
/* ------------ PAGES ---------- */
div.sheet-pg1 {
display: grid;
grid-gap: 1px;
grid-template-columns: 7fr 2fr 8fr 12fr 4fr 12fr;
grid-template-rows: 4fr 8fr 8fr 5fr 3fr 5fr;
grid-template-areas:"name name name name logo logo "
"attrs attrs hp-ac hp-ac hp-ac hp-ac"
"saving dungeon dungeon sixes sixes profs"
"k-spells k-spells k-spells class class lang " /* k-spells = known spells */
"spells-d spells-d spells-d speed speed speed" /* spells-d = spells per day */
"spells-m spells-m spells-m misc exp exp "; /* spells-m = spells memorized */
width: 750px;
height: 1000px;
position: relative;
top:-20px;
}
div.sheet-pg2 {
display: grid;
grid-gap: 1px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px fit-content(30%) auto;
grid-template-areas:"coin ac-types "
"weapons armor "
"equip companions";
width: 750px;
height: 1000px;
position: relative;
top:-20px;
}
div.sheet-pg3 {
display: grid;
grid-gap: 1px;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: 45px auto;
grid-template-areas:"npc-main npc-main npc-main"
"npc-attrs npc-buttons notes ";
width: 600px;
height: 700px;
position: relative;
top:-20px;
}
div.sheet-pg4 {
display: grid;
grid-gap: 1px;
grid-template-columns: 1fr 1fr;
width: 750px;
height: 1000px;
position: relative;
top:-20px;
}
div.sheet-tab-content { display: none; }
/* ------------ Section Specific ---------- */
/* ------- page 1 ------------ */
/* NAME SECTION */
div.sheet-name{
grid-area: name;
}
div.sheet-name div{
margin: 3px 5px;
}
div.sheet-name input{
width: 150px;
}
div.sheet-name .sheet-short{
width: 60px;
padding-right: 0px;
}
/* LOGO SECTION */
div.sheet-logo{
grid-area: logo;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/logo.png);
background-size: 230px 123px;
background-repeat: no-repeat;
}
/* ATTRS SECTION */
div.sheet-attrs{
grid-area: attrs;
}
div.sheet-attrs span:not(.sheet-info),
div.sheet-npc-attrs span:not(.sheet-info){
width: 25px;
margin-top: 4px;
border-style: none none solid none;
margin-bottom: 4px;
border-width: 2px;
text-align: center;
}
div.sheet-attrs input[type="number"],
div.sheet-npc-attrs input[type="number"],
div.sheet-saving input[type="number"],
div.sheet-dungeon input[type="number"]{
width:30px;
padding: 0px 0px;
margin: 4px 4px;
}
div.sheet-attrs span.sheet-note{
width: 100px;
}
/* HP AC SECTION */
div.sheet-hp-ac{
grid-area: hp-ac;
}
div.sheet-hp-ac div.sheet-hp{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/hp.png);
background-size: 220px 110px;
background-repeat: no-repeat;
width: 220px;
height: 110px;
}
div.sheet-hp-ac div.sheet-to-hit{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/to-hit.png);
background-size: 100px 110px;
background-repeat: no-repeat;
width: 100px;
height:110px;
}
div.sheet-hp-ac div.sheet-ac{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Ambition_Avarice/images/ac.png);
background-size: 100px 110px;
background-repeat: no-repeat;
width: 100px;
height: 110px;
}
div.sheet-hp-ac div.sheet-infra{
margin-top: 15px;
}
div.sheet-hp-ac div.sheet-spaced label{
width: 65px;
text-align: end;
}
div.sheet-hp-ac div.sheet-die input[type="text"]{
width: 40px;
}
div.sheet-hp-ac div.sheet-to-hit label.sheet-title{
width: 110px;
padding-right: 0px;
}
div.sheet-hp-ac div.sheet-ac label.sheet-title{
width: 100px;
padding-right: 0px;
}
/* hp-ac buttons */
div.sheet-hp-ac .sheet-buttons label{
text-align: center;
}
div.sheet-hp-ac .sheet-buttons input[type="number"]{
width: 30px;
}
div.sheet-hp-ac .sheet-npc-buttons button[type="roll"]{
margin-top: 4px;
}
/* saving throws */
div.sheet-saving{
grid-area: saving;
}
div.sheet-dungeon{
grid-area: dungeon;
}
div.sheet-dungeon label.sheet-title{
text-align: start;
}
div.sheet-dungeon label.sheet-title,
div.sheet-sixes label.sheet-title{
width: 150px;
}
div.sheet-sixes{
grid-area: sixes;
}
div.sheet-sixes textarea{
width: 220px;
}
/* proficiencies */
div.sheet-profs{
grid-area: profs;
}
/* known spells */
div.sheet-k-spells{
grid-area: k-spells;
}
div.sheet-class{
grid-area: class;
}
div.sheet-class input{
width: 150px;
}
div.sheet-lang{
grid-area: lang;
}
div.sheet-lang textarea{
width: 160px;
}
/* spells per day*/
div.sheet-spells-d{
grid-area: spells-d;
}
div.sheet-spells-d label:not(.sheet-title){
width: 40px;
text-align: center;
}
div.sheet-speed{
grid-area: speed;
align-items: flex-end;
}
div.sheet-speed label{
margin: 5px 2px;
}
div.sheet-speed .sheet-title,
div.sheet-spells-d .sheet-title{
width: 200px;
}
div.sheet-speed .sheet-title{
margin-right: 55px;
}
/* spells memorized */
div.sheet-spells-m{
grid-area: spells-m;
}
div.sheet-misc{
grid-area: misc;
}
div.sheet-exp{
grid-area: exp;
}
div.sheet-spells-m .sheet-title,
div.sheet-exp .sheet-title{
width: 160px;
}
div.sheet-exp label:not(.sheet-title){
width: 110px;
}
/* ------- page 2 equipment ------------ */
div.sheet-coin{
grid-area: coin;
}
div.sheet-coin label{
text-align: center;
margin: 1px;
}
div.sheet-weapons{
grid-area: weapons;
}
div.sheet-armor{
grid-area: armor;
}
div.sheet-weapons div.sheet-names,
div.sheet-armor div.sheet-names{
width: 100%;
justify-content: space-evenly;
}
div.sheet-weapons div.sheet-names span,
div.sheet-armor div.sheet-names span{
font-weight: bold;
}
div.sheet-weapons div.sheet-names span:first-child,
div.sheet-armor div.sheet-names span:first-child{
align-self: flex-start;
}
.sheet-armor > div:nth-child(2) > span:nth-child(2) {
padding-left: 60px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(4) {
padding-right: 35px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(3) {
padding-left: 20px;
}
.sheet-armor > div:nth-child(2) > span:nth-child(5) {
padding-right: 10px;
}
div.sheet-equip{
grid-area: equip;
}
div.sheet-ac-types{
grid-area: ac-types;
}
.sheet-ac-types > div:nth-child(2) > div:nth-child(2) > label:nth-child(1) {
margin-right: 15px;
}
div.sheet-companions{
grid-area: companions;
}
div.sheet-companions input{
margin-bottom: 4px;
}
/* ------- page 3 NPC ------------ */
div.sheet-npc-main{
grid-area: npc-main;
}
div.sheet-npc-main label{
text-align: center;
}
div.sheet-npc-buttons{
grid-area: npc-buttons;
margin-top: 10px;
}
div.sheet-npc-buttons button[type="roll"]{
margin-top: 5px;
}
div.sheet-notes{
grid-area: notes;
}
Reference in New Issue View Git Blame Copy Permalink