Files
roll20-character-sheets/Stargate-RPG/stargate.css
T

933 lines
16 KiB
CSS

/*------------------------------------------------*\
#GENERAL
\*------------------------------------------------*/
input[type="range"].sheet-progress-bar{
width: 100px;
}
input[type="range"].sheet-progress-bar::-moz-range-thumb{
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"].sheet-progress-bar::-moz-range-progress{
background: green;
height: 10px;
}
input[type="range"].sheet-progress-bar::-moz-range-track{
background: red;
height: 10px;
}
input[type="number"].sheet-progress-bar{
border: 2px solid black;
}
button.sheet-hidden{
display: none;
}
/* --------- Text ------------- */
.sheet-bold{
font-weight: 800;
font-size: medium;
}
label {
margin: 0px;
width: 70px;
text-transform: capitalize;
font-size: 0.8em;
height:
/*overflow: hidden;*/
}
label.sheet-title{
width: 130px;
font-size: 1.3em;
text-align: center;
}
h3{
text-align: center;
}
.sheet-short{
width: 50px;
}
.sheet-txtcenter{
text-align: center;
}
.sheet-slash{
font-size: 2em;
font-weight: bold;
}
/* --------- 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;
}
.sheet-w30,
input[type="text"].sheet-w30,
input[type="number"].sheet-w30{
width: 30px;
}
.sheet-w40,
input[type="text"].sheet-w40,
input[type="number"].sheet-w40,{
width: 40px;
}
.sheet-w50,
input[type="text"].sheet-w50,
input[type="number"].sheet-w50{
width: 50px;
}
.sheet-w70,
input[type="text"].sheet-w70,
input[type="number"].sheet-w70{
width: 70px;
}
.sheet-w110,
input[type="text"].sheet-w110,
input[type="number"].sheet-w110{
width: 110px;
}
input[type="checkbox"].sheet-checkbox {
border-style: solid black;
border-radius: 0px;
}
input[type="text"].sheet-stat,
input[type="number"].sheet-stat{
font-size: 2em;
font-weight: bold;
}
/* highlights empty fields with light pink, if the fields have placeholder text */
textarea:placeholder-shown,
input[type="text"]:placeholder-shown,
input[type="number"]:placeholder-shown{
background-color: #EAC9D1;
}
/* higlight selected input with gray*/
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus{
background-color: #ccc;
}
/* -----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;
}
/* ------- Buttons ---------- */
button[type="roll"].sheet-txt-btn:before{
content: ' ';
}
button[type="roll"].sheet-txt-btn{
height: 19px;
border: 2px solid black;
background-color: transparent;
margin-left: 5px;
font-weight: bold;
padding: 2px 5px 4px 5px;
}
button[type="roll"].sheet-txt-btn:hover{
background-color: #87AFC7;
border-radius: 10px;
background-position: 0 -28px;
}
/*-----------------------------------------------------------------*\
#SECTIONS
\*-----------------------------------------------------------------*/
.sheet-version{
float: left;
margin-top: -114px;
width: 240px;
margin-left: 550px;
display: flex;
flex-flow: row nowrap;
}
/* --------- General Section Styling ------------- */
.sheet-section {
display: flex;
padding: 5px;
border: 2px solid black;
background: white;
opacity: 0.9;
}
.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;
}
/* ------------ PAGES ---------- */
div.sheet-page1 {
display: grid;
grid-template-columns: 4fr 8fr 5fr 6fr;
grid-template-rows: repeat(5, 2fr) 5fr 4fr;
grid-template-areas:"name name name name "
"attr skills hp condition"
"attr skills prof condition"
"attr skills ac condition"
"attr skills speed bulk "
"attr skills saves inventory"
"attr attacks attacks attacks ";
width: 850px;
height: 1000px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
background-repeat: no-repeat;
background-size: 700px 700px;
background-position: center;
background-color: black;
margin-top: -84px;
}
div.sheet-page2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:"racial feats "
"class equipment"
"prof notes ";
width: 840px;
height: 990px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
background-repeat: no-repeat;
background-size: 700px 700px;
background-position: center;
background-color: black;
margin-top: -84px;
grid-gap: 10px;
padding: 5px;
}
div.sheet-page3 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:"settings other"
"ammo changelog";
width: 840px;
height: 990px;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/bg.png);
background-repeat: no-repeat;
background-size: 700px 700px;
background-position: center;
background-color: black;
margin-top: -84px;
grid-gap: 10px;
padding: 5px;
}
/* ------------ Section Specific ---------- */
/* ----------- page 1 ------------ */
/* NAME SECTION */
div.sheet-name{
grid-area: name;
padding: 5px 0px 0px 0px;
margin: 5px;
width: 834px;
}
div.sheet-name label{
padding-left: 10px;
}
div.sheet-name div select{
width: 50px;
margin-left: 14px;
}
div.sheet-name input[type="number"]{
height: 20px;
}
/* ATTRS SECTION */
div.sheet-attr{
grid-area: attr;
}
div.sheet-attr .sheet-stat{
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Stargate-RPG/images/attr.png);
background-repeat: no-repeat;
background-size: 124px 113px;
width: 120px;
height: 120px;
background-position: center;
}
div.sheet-attr span:not(.sheet-mod),
div.sheet-skills span:not(.sheet-mod){
font-weight: bold;
font-size: 1.1em;
text-transform: uppercase;
}
div.sheet-attr span:not(.sheet-mod){
font-size: 1.5em;
}
div.sheet-skills span.sheet-mod,
div.sheet-prof span.sheet-mod,
div.sheet-saves span.sheet-mod{
width: 25px;
margin-top: 4px;
border-style: none none solid none;
margin-bottom: 4px;
border-width: 2px;
text-align: center;
}
div.sheet-attr span.sheet-mod{
width: 25px;
margin-top: 4px;
border-style: none;
margin-bottom: 17px;
border-width: 2px;
text-align: center;
font-weight: bold;
}
div.sheet-attr input[type="number"]{
width: 2em;
margin-bottom: 7px;
border-style: none;
font-weight: bold;
font-size: 1.5em;
}
div.sheet-attr button[type="roll"].sheet-large{
font-size: 1.5em;
margin-bottom: -3px;
border-radius: 15px;
}
/* skills SECTION */
div.sheet-skills{
grid-area:skills;
padding-left: 10px;
margin: 5px 2px 5px 5px;
}
div.sheet-skills div{
align-content: space-around;
}
div.sheet-skills span:not(.sheet-mod),
div.sheet-condition span{
text-transform: uppercase;
}
div.sheet-skills span:not(.sheet-mod){
font-size: 0.7em;
padding-top: 9px;
margin-left: 0px;
}
div.sheet-skills .sheet-mod{
margin: 0px 4px 0px 4px;
}
div.sheet-skills button[type="roll"]{
margin-right: 0px;
text-transform: uppercase;
font-size: 1.2em;
}
div.sheet-skills input[type="number"],
div.sheet-saves input[type="number"]{
margin-left: 5px;
}
/* hp SECTION */
div.sheet-hp{
grid-area:hp;
}
div.sheet-hp > div:nth-child(2) {
width: 100px;
}
div.sheet-hp div,
div.sheet-prof div,
div.sheet-ac div,
div.sheet-speed div{
flex-grow: .4;
margin: 5px;
}
div.sheet-hp label,
div.sheet-prof label{
font-size: 1.1em;
font-weight: bold;
}
div.sheet-ac label,
div.sheet-speed .sheet-speed label{
font-size: 1.2em;
font-weight: bold;
}
div.sheet-hp label.sheet-txtcenter{
font-size: 1.8em;
}
div.sheet-hp .sheet-determ label{
font-size: 1.2em;
margin-right: 25px;
}
/* condition SECTION */
div.sheet-condition{
grid-area:condition;
padding-left: 10px;
margin: 8px 25px 8px 4px;
}
div.sheet-condition span{
padding-left: 5px;
font-weight: bold;
font-size: 12px;
}
/* prof SECTION */
div.sheet-prof{
grid-area:prof;
}
div.sheet-prof > div:nth-child(1) > label:nth-child(1){
width: 80px;
}
div.sheet-prof > div:nth-child(1){
padding: 5px 1px;
}
div.sheet-prof > div:nth-child(2) > label:nth-child(1) {
padding: 0px;
}
div.sheet-prof .sheet-init{
margin-left: 2px;
margin-right: 2px;
padding-left: 2px;
padding-right: 2px;
}
div.sheet-prof .sheet-init button{
width: 63px;
margin-left: 0px;
padding-right: 7px;
padding-left: 2px;
}
div.sheet-prof .sheet-moxie{
width: 62px;
}
.sheet-prof > div:nth-child(2) > label:nth-child(1) {
width: 56px;
}
div.sheet-moxie > label:nth-child(1) {
width: 54px;
}
/* ac SECTION */
div.sheet-ac{
grid-area:ac;
}
div.sheet-prof label.sheet-wide,
div.sheet-ac label.sheet-wide{
width: 96px;
padding: 0px;
}
/* speed SECTION */
div.sheet-speed{
grid-area:speed;
}
div.sheet-speed input[type="text"]{
padding: 5px
}
div.sheet-speed div.sheet-death label{
width: 100px;
padding: 0px;
}
div.sheet-speed div.sheet-death span{
font-size: 0.8em;
font-weight: bold;
}
div.sheet-speed div.sheet-death div{
margin: 5px 0px;
}
div.sheet-death > div:nth-child(3) > span:nth-child(4){
padding-right: 9px;
}
div.sheet-speed div.sheet-death input[type="checkbox"]{
transform: scale(0.8);
}
/* saves SECTION */
div.sheet-saves{
grid-area:saves;
margin: 5px 20px 5px 5px;
justify-content: space-between;
}
div.sheet-saves div{
padding-left: 8px;
}
div.sheet-saves span.sheet-mod{
margin: 0px 4px;
}
div.sheet-saves div.sheet-mb20{
margin-bottom: 20px;
}
/* BULK SECTION */
div.sheet-bulk{
grid-area:bulk;
width: 156px;
height: 80px;
}
/* INVENTORY SECTION */
div.sheet-inventory{
grid-area:inventory;
width: 156px;
}
div.sheet-inventory textarea{
width: 95%;
height: 95%;
margin-bottom: 0px;
}
/* attacks SECTION */
div.sheet-attacks{
grid-area:attacks;
display: grid;
grid-template-columns: 3.5fr repeat(5, 1fr) 2fr;
grid-template-rows: repeat(5, 1fr);
margin: 0px 20px 10px 5px;
}
div.sheet-attacks label{
text-transform: capitalize;
}
div.sheet-attacks .sheet-name{
padding-left: 42px;
}
div.sheet-attacks .sheet-dmg-type{
padding-left: 9px;
}
div.sheet-attacks span{
height: 25px;
}
div.sheet-attacks div button[type="roll"],
div.sheet-attacks div input[type="text"]{
height: 20px;
}
div.sheet-attacks .sheet-mr15{
margin-right: 10px;
}
div.sheet-attacks .sheet-ml15{
margin-left: 15px;
}
div.sheet-attacks .sheet-pl20{
padding-left: 20px;
}
/* -------- Page 2 -------- */
div.sheet-page2 label{
font-size: 1.4em;
font-weight: bold;
text-align: center;
width: 140px;
}
div.sheet-page2 textarea{
width: 390px;
height: 280px;
margin-bottom: 0px;
}
/* -------- Page 3 -------- */
div.sheet-page3 .sheet-settings label,
div.sheet-page3 .sheet-changelog label,
div.sheet-page3 label.sheet-other{
font-size: 1.4em;
font-weight: bold;
text-align: center;
width: 250px;
}
/* Settings Section */
div.sheet-settings{
grid-area:settings;
}
div.sheet-settings select{
width: 60px;
}
div.sheet-settings div,
div.sheet-other div{
padding: 10px;
}
/* Changelog Section */
div.sheet-changelog{
grid-area:changelog;
}
div.sheet-changelog img.sheet-phoenix{
width: 150px;
height: 150px;
}
/* ammo SECTION */
div.sheet-ammo.sheet-grid{
grid-area:ammo;
display: grid;
grid-gap: 8px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
padding: 5px 20px 5px 0px;
}
div.sheet-ammo label{
text-align: center;
padding: 0px 0px 5px 0px;
}
div.sheet-ammo div{
margin: 7px 1px 7px 1px;
}
div.sheet-other{
grid-area: other;
}
div.sheet-other span{
font-size: 1.3em;
margin-right: 10px;
}
div.sheet-settings input[type="text"],
div.sheet-other input[type="text"]{
width:395px;
}
div.sheet-other textarea.sheet-dmg{
height: 60px;
width: 245px;
}
/* ------------ Tabs ---------- */
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3{
display: grid;
}
/* styles tab button */
input.sheet-tab{
width: 150px;
height: 22px;
position: relative;
top: -23px;
left: 82px;
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: 419px;
}
div.sheet-tab-content{
display: none;
}
/* Tabs */
/*
.sheet-character,
.sheet-journal,
.sheet-config{
display: none;
}
/* show the selected tab */
/*
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config{
display: grid;
}
*/
/*------------------------------------*\
#ROLL TEMPLATES
\*------------------------------------*/
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-stargate {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-stargate {
margin-left: -7px;
}
.sheet-rolltemplate-stargate .sheet-container {
border: 3px solid black;
border-radius: 3px;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-stargate .sheet-header {
background-color: var(--header-bg-color);
color: var(--header-text-color);
text-align: left;
text-transform: capitalize;
padding: 5px;
border-bottom: 2px solid black;
}
.sheet-rolltemplate-stargate .sheet-title {
font-size:1.2em;
font-weight: bold;
}
/* Stargate Phoenix logo*/
.sheet-rolltemplate-stargate .sheet-title img.sheet-phoenix{
width: 33px;
height: 33px;
float: right;
}
.sheet-rolltemplate-stargate .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-stargate .sheet-container {
/* this is the default color */
--header-bg-color: #a83521;
--header-text-color: #FFF;
}
/* alt template colors */
.sheet-rolltemplate-stargate .sheet-container.sheet-color-green {
--header-bg-color: #008000;
}
.sheet-rolltemplate-stargate .sheet-container.sheet-color-black {
--header-bg-color: #000;
}
.sheet-rolltemplate-stargate .sheet-container.sheet-color-white {
--header-bg-color: #FFF;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-stargate .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-stargate .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-stargate .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-stargate .sheet-value {
}
*/
/* Make even-numbered rows grey */
.sheet-rolltemplate-stargate .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-stargate .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-stargate .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}