slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49ce2f284da8f0a73dce7c6e7f94d71533917164
roll20-character-sheets-tester/Coriolis/Coriolis.css
T
Nimgaard 49ce2f284d Update to Coriolis Character Sheet 
I have never done HTML, CSS or Javascript before updating this sheet, but I tried my best to update the sheet (fix typo's, fix wrong code syntax, improve performance, add missing data per official sheets, add QoL like Modifier box) with backwards compatability. The old sheet had multiple missing attributes and syntax errors so not everything can be saved (it's very minor, like if a weapon has reloads left or if a module is disabled). To-Do: Improve performance (Tables to Divs), add dynamic rows depending on strength, add GM-controlled modifiers
2017-10-09 19:57:49 +02:00

531 lines
13 KiB
CSS
Raw Blame History

/************* SHEET ***************/
input[type=radio].sheet-styleCharacter,
input[type=radio].sheet-styleCharacterNotes,
input[type=radio].sheet-styleSpaceship,
input[type=radio].sheet-styleSpaceshipNotes,
input[type=radio].sheet-styleScripts {
margin-left:2px;
margin-right: 1px;
}
input[type=radio].sheet-styleCharacter + span,
input[type=radio].sheet-styleCharacterNotes + span,
input[type=radio].sheet-styleSpaceship + span,
input[type=radio].sheet-styleSpaceshipNotes + span,
input[type=radio].sheet-styleScripts + span {
font-size:13px;
color: #888888;
text-align:left;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-character{
background: url("https://i.imgur.com/aW740rl.jpg");
background-size: cover;
display: block;
}
input[type=radio].sheet-styleCharacterNotes:checked ~ .sheet-characternotes{
background: url("https://i.imgur.com/aW740rl.jpg");
background-size: cover;
display: block;
}
input[type=radio].sheet-styleSpaceship:checked ~ .sheet-spaceship{
background: url("https://i.imgur.com/aW740rl.jpg");
background-size: cover;
display: block;
}
input[type=radio].sheet-styleSpaceshipNotes:checked ~ .sheet-spaceshipnotes{
background: url("https://i.imgur.com/aW740rl.jpg");
background-size: cover;
display: block;
}
input[type=radio].sheet-styleScripts:checked ~ .sheet-scripts{
background: url("https://i.imgur.com/aW740rl.jpg");
background-size: cover;
display: block;
}
input[type=radio].sheet-styleCharacterNotes:checked ~ .sheet-character,
input[type=radio].sheet-styleSpaceship:checked ~ .sheet-character,
input[type=radio].sheet-styleSpaceshipNotes:checked ~ .sheet-character,
input[type=radio].sheet-styleScripts:checked ~ .sheet-character {
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-characternotes,
input[type=radio].sheet-styleSpaceship:checked ~ .sheet-characternotes,
input[type=radio].sheet-styleSpaceshipNotes:checked ~ .sheet-characternotes,
input[type=radio].sheet-styleScripts:checked ~ .sheet-characternotes {
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-spaceship,
input[type=radio].sheet-styleCharacterNotes:checked ~ .sheet-spaceship,
input[type=radio].sheet-styleSpaceshipNotes:checked ~ .sheet-spaceship,
input[type=radio].sheet-styleScripts:checked ~ .sheet-spaceship {
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-spaceshipnotes,
input[type=radio].sheet-styleCharacterNotes:checked ~ .sheet-spaceshipnotes,
input[type=radio].sheet-styleSpaceship:checked ~ .sheet-spaceshipnotes,
input[type=radio].sheet-styleScripts:checked ~ .sheet-spaceshipnotes {
display: none;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-scripts,
input[type=radio].sheet-styleCharacterNotes:checked ~ .sheet-scripts,
input[type=radio].sheet-styleSpaceship:checked ~ .sheet-scripts,
input[type=radio].sheet-styleSpaceshipNotes:checked ~ .sheet-scripts {
display: none;
}
.sheet-header{
color: #fff;
text-align: center;
font-family: Tahoma;
font-weight: bold;
font-size: 18px;
}
.sheet-version {
position: absolute;
top: 0px;
right: 20px;
pointer-events: none;
border-bottom: none;
}
.sheet-version input[type="text"] {
border-bottom: none;
width: 40px;
}
button[type=roll] {
padding: 2px 4px 2px !important;
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: "";
}
.sheet-spacer {
width: 100%;
height: 10px;
}
input {
background: transparent;
border: none;
}
input[type=number] {
background: #e3deda;
min-width: 2em;
max-width: 3em;
border-radius: 5px;
margin: 2px;
text-align: center;
background-image:url("https://i.imgur.com/iJ5VYa3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
input[type=text],
.sheet-textbox {
width: 97%;
border-bottom: 1px dotted#a29090;
margin: 2px;
}
input[type=checkbox] {
transform: scale(1.6);
}
table {
border: 2px solid #71685e;
margin: 5px;
padding: 0px;
border-collapse: collapse;
}
/************* Start of Custom Checkbox *************/
/* Hide Checkbox */
.sheet-checkbox-custom input[type="checkbox"] {
opacity: 0;
transform: scale(1.6);
width: 10px;
height: 10px;
position: relative;
top: 16px;
left: 13px;
margin: -10px;
cursor: pointer;
z-index: 2;
}
/* Fake Checkbox */
.sheet-checkbox-custom input[type="checkbox"] + span::before {
opacity: 100;
transform: scale(1.6);
margin-right: 4px;
line-height: 14px;
text-align: center;
vertical-align: middle;
display: inline-block;
content: "";
width: 12px;
height: 12px;
font-size: 12px;
border-radius: 3px;
background-image:url("https://i.imgur.com/1uEkf4t.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* Checkmark Checkbox */
.sheet-checkbox-custom input[type="checkbox"]:checked + span::before {
content: "✖";
}
/************* End of Custom Checkbox *************/
/************* Start of Radio Fill *************/
/* Hide Radio */
.sheet-radio-fill input[type="radio"] {
opacity: 0;
width: 17px;
height: 17px;
position: relative;
top: 14px;
left: 11px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* Fake radio */
.sheet-radio-fill input[type="radio"] + span::before
{
display: inline-block;
content: "";
width: 17px;
height: 17px;
background-image:url("https://i.imgur.com/r7BhjwN.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
top: 25px;
left: 0px;
border-radius: 50%;
z-index: 1;
}
/* Remove dot from all radios _after_ selected one */
.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;
}
/************* End of Radio Fill *************/
.sheet-ti {
border: 0px none;
margin: 0 auto;
padding: 0px;
}
td {
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
h1 {
color: #ffffff;
text-transform: uppercase;
margin: 0;
padding: 2px 6px;
line-height: 1.4em;
font-weight: bold;
font-family: Tahoma;
font-size: 15px;
}
h2 {
color: #111010;
text-transform: uppercase;
margin: 0;
padding: 2px 6px;
line-height: 1.4em;
font-weight: bold;
font-family: Tahoma;
font-size: 13px;
}
h3 {
color: #0f0e0e;
text-transform: uppercase;
margin: 0;
padding: 2px 6px;
line-height: 1.4em;
font-weight: bold;
font-family: Tahoma;
font-size: 11px;
}
h4 {
color: #ffffff;
text-transform: uppercase;
/*text-align: right;*/
margin: 0;
margin-right: 0.4em;
padding: 2px 6px;
line-height: 1.4em;
font-family: Tahoma;
font-size: 8px;
}
h5 {
color: #ffffff;
text-transform: uppercase;
margin: 0;
margin-right: 0.4em;
line-height: 1.4em;
font-weight: 10;
font-family: Tahoma;
font-size: 10px;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
.repitem table,
fieldset table {
margin: 0;
border: 0;
width: 100%;
}
.sheet-flex-top {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
}
.sheet-flex-top input,
.sheet-flex-bottom input {
flex: 1 1 auto;
}
.sheet-flex-bottom {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 6px;
}
.sheet-header h6 {
line-height: 70px;
}
.sheet-header p {
margin: 0;
}
.sheet-value {
text-align: right;
min-width: 100px;
}
.sheet-birr {
text-align: right;
}
.sheet-table-thin {
width: 270px;
}
.sheet-table-half {
width: 400px;
}
.sheet-table-wide {
width: 550px;
}
.sheet-table-widest {
width: 830px;
}
.sheet-table-invis {
}
.sheet-table-invis2 {
line-height: 1.4em;
}
.sheet-table-light,
.sheet-textbox {
background-color: #e2ded9;
}
.sheet-table-medium {
background-color: #a19a92;
line-height: 1.4em;
}
.sheet-table-dark {
background-image:url("https://i.imgur.com/2KArYMt.gif"); background-repeat:repeat;;
}
.sheet-table-dark-sub {
background-image:url("https://i.imgur.com/2KArYMt.gif"); background-repeat:repeat;;
color : yellow;
text-align : center;
font-size : 10px;
}
.sheet-table-graphic {
background-image:url("https://i.imgur.com/MazfE7Z.gif"); background-repeat:repeat;;
}
.sheet-table-graphic2 {
background-image:url("https://i.imgur.com/LGEKOQX.gif"); background-repeat:repeat;;
}
.sheet-table-graphic3 {
background-image:url("https://i.imgur.com/mdfmnBZ.gif"); background-repeat:repeat;;
}
.sheet-bb {
border-bottom: 1px solid #61574b;
}
.sheet-bl {
border-left: 1px solid #61574b;
}
.sheet-br {
border-right: 1px solid #61574b;
}
.sheet-borders {
border: 1px solid #61574b;
}
.cb-small {
color: #e3deda;
}
.sheet-weapons h6,
.sheet-ship-weapons h6,
.sheet-ship-logs h6 {
text-align: left;
}
.sheet-weapons {
border: 0px none;
margin: 0 auto;
padding: 0px;
}
.sheet-weapons td:nth-child(2),
.sheet-weapons td:nth-child(3),
.sheet-weapons td:nth-child(4),
.sheet-weapons td:nth-child(5) {
width: 65px;
}
.sheet-weapons td:nth-child(6) {
width: 80px;
}
.sheet-weapons td:nth-child(7) {
width: 200px;
}
.sheet-weapons td:nth-child(8) {
width: 120px;
}
.sheet-ship-weapons {
border: 0px none;
margin: 0 auto;
padding: 0px;
}
.sheet-ship-weapons td:nth-child(2),
.sheet-ship-weapons td:nth-child(3),
.sheet-ship-weapons td:nth-child(4),
.sheet-ship-weapons td:nth-child(5) {
width: 65px;
}
.sheet-ship-weapons td:nth-child(6) {
width: 200px;
}
.sheet-ship-logs td:nth-child(2) {
width: 120px;
}
.sheet-ship-logs td:nth-child(3),
.sheet-ship-logs td:nth-child(4),
.sheet-ship-logs td:nth-child(5) {
width: 150px;
}
.sheet-people td:nth-child(2) {
width: 250px;
}
.sheet-people td:nth-child(3),
.sheet-people td:nth-child(4),
.sheet-people td:nth-child(5) {
width: 400px;
}
/* Roll template ------------------------------------------------------------ */
.sheet-skill-roll {
float: right;
padding-left: 20px;
}
.sheet-rolltemplate-coriolis table {
width: 80%;
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: #ffffff;
padding: 2px;
border-bottom: 1px solid black;
line-height: 1.6em;
font-size: 1.2em;
font-weight: bold;
}
.sheet-rolltemplate-coriolis .sheet-roll {
color: #232924;
}
.sheet-rolltemplate-coriolis td {
padding: 5px;
border-bottom: 1px solid #62584d;
}
.sheet-rolltemplate-coriolis tr:nth-child(odd) {
background-color: #a19a92;
}
.sheet-rolltemplate-coriolis tr:nth-child(even) {
background-color: #e2ded9;
}
.sheet-rolltemplate-coriolis .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 0;
}
.sheet-rolltemplate-coriolis .sheet-fail td {
background-image:url("https://i.imgur.com/VFA3fjP.png"); background-repeat:repeat; /* red */
color: #fff;
}
.sheet-rolltemplate-coriolis .sheet-success td {
background-image:url("https://i.imgur.com/Kwfbfyh.png"); background-repeat:repeat; /* blue */
color: #fff;
}
.sheet-rolltemplate-coriolis .sheet-great-success td {
background-image:url("https://i.imgur.com/fkDjSos.png"); background-repeat:repeat; /* green */
color: #fff;
}
.sheet-showsize {
background-color: red;
}
.sheet-span-as-input {
text-align: left;
min-width: 100px;
background: #e3deda;
float: right;
min-width: 2em;
max-width: 3em;
min-height: 1.5em;
border-radius: 5px;
margin: 2px;
padding-top: 5px;
padding-right: 5px;
padding-left: 8px;
padding-bottom: 3px;
background-image:url(https://i.imgur.com/iJ5VYa3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* ************************* TEST ************************* */
.sheet-hidden {
display:none;
}
Reference in New Issue View Git Blame Copy Permalink