Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 19:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
1be80098b86e1d10efd4189e5ec5fbcdb7ce5e42
roll20-character-sheets/Coriolis/Coriolis.css
T
Nimgaard 6520172c3c Remade the sheet from scratch 
Changed all the layout to be made from <div> instead of <table>, hopefully improving compatibility, optimization and speed across all browsers. Added missing input fields (energy and hull on spaceship sheet, and modules and features in spaceship notes sheet). Improved layout and readability. Fixed minor bugs. Tested with the old and the current sheet.
2017-11-05 18:05:57 +01:00

434 lines
12 KiB
CSS
Raw Blame History

/* Coriolis Roll20 Character Sheet updated by Nicolaj G. with credit to Dark Heresy 2ed Roll20 Character Sheet with authors Daniel D., Michael R., Samuel L. */
/*this hides the contents of each tab by default*/
div[class^="sheet-section"] {
display: none;
}
/*this shows the tab content when the appropriate input field is selected*/
input[type=radio].sheet-tab1:checked ~ div.sheet-section-character,
input[type=radio].sheet-tab2:checked ~ div.sheet-section-characternotes,
input[type=radio].sheet-tab3:checked ~ div.sheet-section-spaceship,
input[type=radio].sheet-tab4:checked ~ div.sheet-section-spaceshipnotes
{
display: block;
}
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
input[type=radio].sheet-tab {
width: 120px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #e2ded9;
color: #1a1a1a;
border: solid 1px #61574b;
font-weight: bold;
border-radius: 4px;
width: 120px;
height: 40px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -120px;
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab3:checked + span.sheet-tab3,
input.sheet-tab4:checked + span.sheet-tab4
{
background: #1a1a1a;
color: #e2ded9;
border-radius: 4px;
}
/*----------- End Tab Setup -----------*/
/* CSS Reset */
.charsheet .sheet-wrapper div, .charsheet .sheet-wrapper span, .charsheet .sheet-wrapper label,
.charsheet .sheet-wrapper h1, .charsheet .sheet-wrapper h2, .charsheet .sheet-wrapper h3, .charsheet .sheet-wrapper h4, .charsheet .sheet-wrapper h5, .charsheet .sheet-wrapper h6, .charsheet .sheet-wrapper p,
.charsheet .sheet-wrapper table, .charsheet .sheet-wrapper caption, .charsheet .sheet-wrapper tbody, .charsheet .sheet-wrapper tfoot, .charsheet .sheet-wrapper thead, .charsheet .sheet-wrapper tr, .charsheet .sheet-wrapper th, .charsheet .sheet-wrapper td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
color: #404040;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Main Styles */
.charsheet {
background: #1a1a1a;
}
.sheet-header {
text-transform: uppercase;
text-align: center;
font-family: Tahoma;
font-weight: bold;
font-size: 18px;
color: #fff;
}
/* Begin Styles */
.charsheet .sheet-wrapper input,
.charsheet .sheet-wrapper textarea {
box-shadow: 0 0px 0px rgba(0,0,0,0.075);
background: transparent;
border: none;
width: 100%;
margin: 0px 0px 0px 0px; /* Top, right, bottom, left */
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col {
width: 30%;
margin-left: 0.5em;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col:nth-child(2) {
width: 30%;
margin:auto !important;
}
.charsheet .sheet-wrapper .sheet-3colrow .sheet-col:last-child {
width: 30%;
margin-right: 0.5em;
}
.charsheet .sheet-wrapper .sheet-2colrow-split .sheet-col {
width: 50%;
margin-left: 0.5em;
}
.charsheet .sheet-wrapper .sheet-2colrow-split .sheet-col:last-child {
width: calc(50% - 2em);
}
.charsheet .sheet-wrapper .sheet-2colrow-tight-left .sheet-col {
width: 33%;
margin-left: 0.5em;
}
.charsheet .sheet-wrapper .sheet-2colrow-tight-left .sheet-col:last-child {
width: calc(67% - 2em);
}
.charsheet .sheet-wrapper .sheet-2colrow-tight-right .sheet-col {
width: 67%;
margin-left: 0.5em;
}
.charsheet .sheet-wrapper .sheet-2colrow-tight-right .sheet-col:last-child {
width: calc(33.1% - 2em);
}
.charsheet .sheet-wrapper .sheet-1colrow .sheet-col {
width: calc(99.8% - 1em);
margin-left: 0.5em;
margin-right: 0.5em;
}
/* Rows and Items */
.charsheet .sheet-wrapper .sheet-row {
height: 2.5em;
border-bottom: 1px solid #61574b;
}
.charsheet .sheet-wrapper .sheet-item {
display: inline-block;
height: 2.5em;
line-height: 2.25em;
margin: 0 -2px;
overflow: hidden;
}
.charsheet .sheet-wrapper h1,
.charsheet .sheet-wrapper h2,
.charsheet .sheet-wrapper h3,
.charsheet .sheet-wrapper h4 {
font-family: Tahoma;
font-weight: bold;
text-transform: uppercase;
text-align: left;
padding: 0px 0px 0px 0.5em;
}
.charsheet .sheet-wrapper h1 {
color: #ffffff;
font-size: 15px;
}
.charsheet .sheet-wrapper h2 {
color: #1a1a1a;
font-size: 13px;
}
.charsheet .sheet-wrapper h3 {
color: #1a1a1a;
font-size: 9px;
}
.charsheet .sheet-wrapper h4 {
color: #ffffff;
font-size: 8px;
text-align: center;
}
.charsheet .sheet-wrapper .sheet-table-border {
border: 2px solid #615a51;
}
.charsheet .sheet-wrapper .sheet-table-graphic-dark {
background-image:url("https://i.imgur.com/2KArYMt.gif");
background-repeat:repeat;
}
.charsheet .sheet-wrapper .sheet-table-graphic-light {
background-image:url("https://i.imgur.com/MazfE7Z.gif");
background-repeat:repeat;
}
.charsheet .sheet-wrapper .sheet-table-background-light,
.charsheet .sheet-wrapper .sheet-textbox {
background-color: #e2ded9;
}
.charsheet .sheet-wrapper .sheet-table-value {
text-align: right;
}
.charsheet .sheet-wrapper input[type=number] {
width: 4em;
text-align: center;
background-image:url("https://i.imgur.com/iJ5VYa3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.charsheet .sheet-wrapper input[type=text],
.charsheet .sheet-wrapper input[type=textbox] {
width: 100%;
font-size: 10px;
font-family: Tahoma;
font-weight: bold;
text-overflow: ellipsis;
}
.charsheet .sheet-wrapper input[type=text]:hover,
.charsheet .sheet-wrapper input[type=textbox]:hover {
text-overflow: inherit;
overflow: visible;
}
/************* Start of Custom Roll Button **************/
button[type=roll] {
font-size: 10px;
font-family: "dicefontd6";
background-color: #e2ded9;
font-weight: bold;
text-shadow: 1px 1px #D0D0D0;
color: #000000;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border: 1px solid #D0D0D0;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
button[type=roll].sheet-blank-roll-button::before {
content: "";
}
/* Start of Custom Checkbox */
/* Hide Checkbox */
.charsheet .sheet-wrapper .sheet-custom-checkbox input[type="checkbox"] {
opacity: 0;
transform: scale(1.5);
width: 10px;
height: 10px;
position: relative;
top: 1em;
left: 0.7em;
margin: -5px;
cursor: pointer;
z-index: 2;
}
/* Fake Checkbox */
.charsheet .sheet-wrapper .sheet-custom-checkbox input[type="checkbox"] + span::before {
opacity: 1;
transform: scale(1.5);
margin-right: 4px;
line-height: 14px;
position: relative;
top: 0.5em;
left: -0.1em;
display: inline-block;
content: "";
width: 12px;
height: 12px;
background-image:url("https://i.imgur.com/1uEkf4t.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* Checkmark Checkbox */
.charsheet .sheet-wrapper .sheet-custom-checkbox input[type="checkbox"]:checked + span::before {
content: "✖";
}
/* ---------- End of Custom Checkbox ---------- */
/* ---------- Start of Custom Checkbox ---------- */
/* Hide Checkbox */
.charsheet .sheet-wrapper .sheet-reloads-checkbox input[type="checkbox"] {
opacity: 0;
transform: scale(0.95);
position: relative;
top: 0em;
left: 0.5em;
margin: -5px;
cursor: pointer;
z-index: 2;
}
/* Fake Checkbox */
.charsheet .sheet-wrapper .sheet-reloads-checkbox input[type="checkbox"] + span::before {
opacity: 1;
transform: scale(0.95);
position: relative;
top: -0.4em;
left: 0em;
width: 12px;
height: 12px;
line-height: 14px;
background-image:url("https://i.imgur.com/1uEkf4t.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: inline-block;
content: "";
}
/* Checkmark Checkbox */
.charsheet .sheet-wrapper .sheet-reloads-checkbox input[type="checkbox"]:checked + span::before {
content: "✖";
}
.sheet-flex-reloads-checkbox {
display: flex;
flex-wrap: nowrap;
margin-right: 5px;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
}
/* ---------- End of Custom Checkbox ---------- */
.charsheet .sheet-wrapper .cb-small {
color: #e3deda;
}
/* Hide Radio */
.charsheet .sheet-wrapper .sheet-radio-fill input[type="radio"] {
opacity: 0;
transform: scale(1.5);
line-height: 1em;
text-align: center;
vertical-align: middle;
position: relative;
left: 0.5em;
top: 5px;
margin: -7px;
cursor: pointer;
z-index: 2;
}
/* Fake radio */
.charsheet .sheet-wrapper .sheet-radio-fill input[type="radio"] + span::before
{
display: inline-block;
content: "";
width: 18px;
height: 18px;
background-image:url("https://i.imgur.com/r7BhjwN.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
top: 2.85em;
left: -0.1em;
border-radius: 50%;
z-index: 1;
}
/* Remove dot from all radios _after_ selected one */
.charsheet .sheet-wrapper .sheet-radio-fill input[type="radio"]:checked ~ input[type="radio"] + span::before
{
opacity: 0;
background-image:url("https://i.imgur.com/1uEkf4t.png");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 1;
}
.sheet-flex-checkbox {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
}
.sheet-flex-checkbox input,
.sheet-flex-radio input {
flex: 1 1 auto;
}
.sheet-flex-radio {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 6px;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
.repitem table,
fieldset table {
margin: 0;
border: 0;
width: 100%;
}
/* ---------- Roll template ---------- */
.sheet-rolltemplate-coriolis table {
width: 100%;
color: black;
font-size: 1em;
font-family: sans-serif;
font-weight: bold;
border: 2px solid #71685e;
}
.sheet-rolltemplate-coriolis th {
background-image:url("https://i.imgur.com/2KArYMt.gif"); background-repeat: no-repeat;
color: #e3e8e4;
padding: 2px;
border-bottom: 1px solid black;
line-height: 1.6em;
height: 1.5em;
font-size: 1.2em;
font-weight: bold;
}
.sheet-rolltemplate-coriolis .sheet-roll {
color: #232924;
}
.sheet-rolltemplate-coriolis .inlinerollresult {
display: inline-block;
min-width: 2em;
text-align: center;
border: 0;
}
.sheet-rolltemplate-coriolis .sheet-reroll td {
background-image:url("https://imgur.com/L2bnHyJ.png"); background-repeat:repeat; /* grey */
color: white;
text-shadow:5px 5px 10px black;
}
.sheet-rolltemplate-coriolis .sheet-fail td {
background-image:url("https://imgur.com/K9b4WHa.png"); background-repeat:repeat; /* red */
color: white;
text-shadow:5px 5px 10px black;
}
.sheet-rolltemplate-coriolis .sheet-success td {
background-image:url("https://imgur.com/PKAUZZT.png"); background-repeat:repeat; /* blue */
color: white;
text-shadow:5px 5px 10px black;
}
.sheet-rolltemplate-coriolis .sheet-great-success td {
background-image:url("https://imgur.com/4LAQCuC.png"); background-repeat:repeat; /* green */
color: white;
text-shadow:5px 5px 10px black;
}
Reference in New Issue View Git Blame Copy Permalink