Files
roll20-character-sheets/CypherSystem/CypherSystem.css
T
Natha 82beb2d8f8 Cypher System v1.2
1) It's now possible to change the style/look of the sheet to the ones
of the generic Cypher System, Numenéra or The Strange.
2) By popular demand, the stat/skill roll template has been unified and
only rolls one d20 dice (for the 3D dice users out there), whatever is
the "Difficulty" roll parameter from the "Action" section. If the
difficulty parameter has been set to 0, the beaten difficulty is no
longer calculated (due to Roll20 limitations), but the raw d20 dice is
shown, as the special natural rolls (1 or 17+), and the steps modifiying
the difficulty are displayed (and summed).
3) New "Artifact" repeating section with integrated Depletion roll.
2015-10-04 01:56:11 +02:00

599 lines
16 KiB
CSS

/* Roll templates */
.sheet-rolltemplate-cyphMsg table {
width: 189px;
padding: 2px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
border: none;
background-color: #FEFAFA;
border-bottom: 1px solid #B80000;
}
.sheet-rolltemplate-cyphMsg tr {
border-left: 1px solid #B80000;
border-right: 1px solid #B80000;
}
.sheet-rolltemplate-cyphMsg th {
background-color: #B80000;
color : #FBFCFC;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
margin-bottom: 6px;
}
.sheet-rolltemplate-cyphInit table {
width: 189px;
padding: 2px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
border: none;
background-color: #FAF4FA;
border-bottom: 1px solid #931693;
}
.sheet-rolltemplate-cyphInit tr {
border-left: 1px solid #931693;
border-right: 1px solid #931693;
}
.sheet-rolltemplate-cyphInit th {
background-color: #931693;
color : #FBFCFC;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
margin-bottom: 6px;
}
.sheet-rolltemplate-cyphRecovery table {
width: 189px;
padding: 2px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
border: none;
background-color: #EAF3EA;
border-bottom: 1px solid #2E8A2E;
}
.sheet-rolltemplate-cyphRecovery tr {
border-left: 1px solid #2E8A2E;
border-right: 1px solid #2E8A2E;
}
.sheet-rolltemplate-cyphRecovery th {
background-color: #2E8A2E;
color : #FBFCFC;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
margin-bottom: 6px;
}
.sheet-rolltemplate-cyphRoll table
, .sheet-rolltemplate-cyphBasicRoll table {
width: 189px;
padding: 2px;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
border: none;
background-color: #FBFCFC;
border-bottom: 1px solid #4E686A;
}
.sheet-rolltemplate-cyphRoll tr:first-child
, .sheet-rolltemplate-cyphBasicRoll tr:first-child
, .sheet-rolltemplate-cyphRecovery tr:first-child
, .sheet-rolltemplate-cyphInit tr:first-child
, .sheet-rolltemplate-cyphMsg tr:first-child {
border:none;
}
.sheet-rolltemplate-cyphRoll tr
, .sheet-rolltemplate-cyphBasicRoll tr {
border-left: 1px solid #4E686A;
border-right: 1px solid #4E686A;
}
.sheet-rolltemplate-cyphRoll th
, .sheet-rolltemplate-cyphBasicRoll th {
background-color: #4E686A;
color : #FBFCFC;
line-height: 1.4em;
font-size: 1.2em;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
margin-bottom: 6px;
}
.sheet-rolltemplate-cyphRoll td
, .sheet-rolltemplate-cyphBasicRoll td
, .sheet-rolltemplate-cyphRecovery td
, .sheet-rolltemplate-cyphInit td
,.sheet-rolltemplate-cyphMsg td {
padding-left: 5px;
font-family: "Verdana";
font-size: 0.9em;
}
.sheet-rolltemplate-cyphRoll hr
, .sheet-rolltemplate-cyphBasicRoll hr
, .sheet-rolltemplate-cyphRecovery hr
, .sheet-rolltemplate-cyphInit hr
,.sheet-rolltemplate-cyphMsg hr {
margin: 4px 0 4px 0;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(5,109,161,1.75), rgba(0,0,0,0));
}
.sheet-rolltemplate-cyphRoll .sheet-tcat
, .sheet-rolltemplate-cyphBasicRoll .sheet-tcat
, .sheet-rolltemplate-cyphRecovery .sheet-tcat
, .sheet-rolltemplate-cyphInit .sheet-tcat
,.sheet-rolltemplate-cyphMsg .sheet-tcat {
font-style: italic;
font-variant: small-caps;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
}
.sheet-rolltemplate-cyphRoll .inlinerollresult
, .sheet-rolltemplate-cyphMsg .inlinerollresult {
font-weight:normal;
background-color: transparent;
border: none;
font-family: "Verdana";
font-size: 1em;
}
.sheet-rolltemplate-cyphBasicRoll .inlinerollresult
, .sheet-rolltemplate-cyphRecovery .inlinerollresult
, .sheet-rolltemplate-cyphInit .inlinerollresult {
font-weight:normal;
background-color: transparent;
font-family: "Verdana";
font-size: 1em;
border: 1px solid LightGray;
}
/************* SHEET ***************/
div,
button,
textarea,
span,
input,
select,
table,
tr,
td,
th{
box-sizing: border-box;
}
span.sheet-smallspan{
font-size:11px;
color: #888888;
text-align:left;
}
input[type=radio].sheet-styleCypher,
input[type=radio].sheet-styleNumenera,
input[type=radio].sheet-styleTheStrange{
margin-right:85px;
margin-left: 5px;
text-align:left;
}
input[type=radio].sheet-styleCypher:after,
input[type=radio].sheet-styleNumenera:after,
input[type=radio].sheet-styleTheStrange:after{
margin-left:15px;
content: attr(title);
font-size:11px;
color: #888888;
text-align:left;
whitespace: nowrap;
display:inline-block;
width: 85px;
}
button[type=roll].sheet-basicbt {
padding: 2px 0px 0px 1px;
margin: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
text-align:center;
vertical-align: middle;
line-height: 0px;
height: 20px;
width: 20px;
font-size: 1.2em;
font-weight: normal;
color:#22428F;
border-width: 1px;
border-style: solid;
border-color: rgba(34,66,143,0.5);
border-radius: 10px;
}
button[type=roll].sheet-basicbt:hover{
border-width: 2px;
border-color:#22428F;
font-weight: bold;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main button[type=roll].sheet-basicbt {
padding: 2px 0px 0px 1px;
margin: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
text-align:center;
vertical-align: middle;
line-height: 0px;
height: 20px;
width: 20px;
font-size: 1.2em;
font-weight: bold;
color: #A09C90;
border-width: 1px;
border-style: solid;
border-color: #A09C90;
border-radius: 10px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main button[type=roll].sheet-basicbt:hover{
border-width: 2px;
color: #53628A;
border-color:#53628A;
font-weight: bold;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main button[type=roll].sheet-basicbt {
padding: 2px 0px 0px 1px;
margin: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
text-align:center;
vertical-align: middle;
line-height: 0px;
height: 20px;
width: 20px;
font-size: 1.2em;
font-weight: normal;
color: #050E29;
border-width: 1px;
border-style: solid;
border-color: rgba(5,14,41,0.5);
border-radius: 10px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main button[type=roll].sheet-basicbt:hover{
border-width: 2px;
color: #050E29;
border-color:#050E29;
font-weight: bold;
}
button[type=roll].sheet-apibt{
padding: 2px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-shadow: none;
box-shadow: none;
text-align:center;
vertical-align: middle;
line-height: 0px;
font-size: 1em;
font-weight: normal;
width:15px;
height: 15px;
color: #6D0100;
border: 1px solid #CC9F9F;
border-radius: 0px 3px 0px 3px;
}
button[type=roll].sheet-apibt:hover{
border-color: #6D0100;
font-weight: bold;
}
table{
border-collapse: collapse;
padding:none;
margin:none;
width: 100%;
}
tr{
padding:none;
margin:none;
}
td{
padding:none;
margin:none;
white-space: nowrap;
text-align: center;
}
input[type=text]{
margin: 0px;
padding-left: 0.3em;
padding-right: 0.1em;
padding-top: 0.1em;
padding-bottom: 0.1em;
background-color: white;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main input[type=text]{
margin: 0px;
padding-left: 0.3em;
padding-right: 0.1em;
padding-top: 0.1em;
padding-bottom: 0.1em;
background-color: #F5F7FC;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main input[type=text]{
margin: 0px;
padding-left: 0.3em;
padding-right: 0.1em;
padding-top: 0.1em;
padding-bottom: 0.1em;
background-color: white;
border-radius: 0px;
}
select{
height: 20px;
margin: 0px;
padding-left: 0.3em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.1em;
background-color: white;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main select{
height: 20px;
margin: 0px;
padding-left: 0.3em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.1em;
background-color: #F5F7FC;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main select{
height: 20px;
margin: 0px;
padding-left: 0.3em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.1em;
background-color: #F5F7FC;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main textarea{
background-color: #F5F7FC;
}
input[type="number"]{
text-align: right;
height: 20px;
margin: 0px;
padding-left: 0.3em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.1em;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main input[type="number"]{
text-align: right;
height: 20px;
margin: 0px;
padding-left: 0.3em;
padding-right: 0.2em;
padding-top: 0.2em;
padding-bottom: 0.1em;
background-color: #F5F7FC;
}
input[type="radio"]{
padding: 0px;
margin: 0px;
width: 12px;
}
.sheet-main{
background: linear-gradient(#E1E1EE,white);
width: 1056px;
padding: 10px;
}
input[type=radio].sheet-styleNumenera:checked ~ .sheet-main{
background: white;
width: 1056px;
padding: 10px;
}
input[type=radio].sheet-styleTheStrange:checked ~ .sheet-main{
background: linear-gradient(#1B1E30, #DBDCDE, #E0E7ED, white);
width: 1056px;
padding: 10px;
}
input[type=text].sheet-whiteinput{
background: white;
height: 25px;
border-width: 0px 0px 3px 0px;
font-weight: bold;
border-color: #22428F;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main input[type=text].sheet-whiteinput{
background: white;
border-color: #53628A;
border-width: 0px 0px 2px 0px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main input[type=text].sheet-whiteinput{
border-color: #050E29;
border-width: 0px 0px 1px 0px;
}
.sheet-underwhite{
color: white;
background-color: #BDC3DC;
border: none;
border-bottom-right-radius: 7px;
padding-left: 3px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 5px;
font-size: 10px;
font-weight: bold;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-underwhite{
color: #53628A;
background: linear-gradient(to right,#E7DEB0,#FDF9F4);/* #E7DEB0;*/
border: none;
border-bottom-right-radius: 7px;
padding-left: 3px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 5px;
font-size: 10px;
font-weight: bold;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-underwhite{
color: #DCDFE4;
background: transparent;
border: none;
border-bottom-right-radius: 0px;
padding-left: 3px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 5px;
font-size: 10px;
font-weight: normal;
font-style: italic;
}
.sheet-text1{
color: #22428F;
background: transparent;
font-weight: bold;
font-size: 12px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-text1{
color: #7F2E23;
background: transparent;
font-weight: bold;
font-size: 12px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-text1{
color: #050E29;
background: transparent;
font-weight: bold;
font-size: 12px;
}
.sheet-text2{
color: #22428F;
background: transparent;
font-size: 11px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-text2{
color: #53628A;
background: transparent;
font-size: 11px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-text2{
color: #050E29;
background: transparent;
font-size: 11px;
}
.sheet-textfat{
color: #22428F;
background: transparent;
font-weight: bold;
font-size: 12px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-textfat{
color: #7F2E23;
background: transparent;
font-weight: bold;
font-size: 12px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-textfat{
color: white;
background: transparent;
font-weight: bold;
font-size: 12px;
}
.sheet-supblock{
width: 340px;
text-align: center;
}
.sheet-blublock{
padding: 0px 0px 0px 4px;
background-color: #22428F;
border-bottom-left-radius: 7px;
border-top-right-radius: 7px;
border: 1px solid #22428F;
text-align: center;
margin-bottom: 5px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-blublock{
padding: 0px 0px 0px 2px;
background-color: #53628A;
/* border-bottom-left-radius: 7px;
border-top-right-radius: 7px; */
border-radius: 7px;
border: 1px solid #53628A;
text-align: center;
margin-bottom: 5px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-blublock{
padding: 2px;
background-color: #050E29;
border-radius: 0px;
border: 1px solid white;
text-align: center;
margin-bottom: 5px;
}
.sheet-inpblock{
background-color: #E0E0ED;
border: none;
border-radius: 7px;
padding:0px 4px 0px 4px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-inpblock{
/* background-color: white;*/
background: radial-gradient(#FDF9F4 40%,#E7DEB0);
border: none;
border-radius: 7px;
padding:0px 4px 0px 4px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-inpblock{
background-color: #DCDFE4;
border: none;
border-radius: 0px;
padding:0px 4px 0px 4px;
}
.sheet-inpblock2{
background-color: #C8C8DF;
border: none;
border-radius: 7px;
padding:0px 4px 0px 4px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main .sheet-inpblock2{
background: radial-gradient(#FDF9F4 40%,#E7DEB0);
border: none;
border-radius: 7px;
padding:0px 4px 0px 4px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main .sheet-inpblock2{
background-color: #DCDFE4;
border: none;
border-radius: 0px;
padding:0px 4px 0px 4px;
}
input[type=radio].sheet-styleCypher:checked ~ div.sheet-main img.sheet-gamelogo{
content: url("https://lh4.googleusercontent.com/-T_PWRmd-TxE/Vfs9cEqYWbI/AAAAAAAAW0I/rUC1JdU-UXg/w900-h263/Roll20_cypher_logo.png");
width: 330px;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main img.sheet-gamelogo{
content: url("http://upload.wikimedia.org/wikipedia/en/8/8e/Numenera_Logo.png");
width: 330px;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main img.sheet-gamelogo{
content: url("http://www.thestrangerpg.com/wp-content/uploads/2013/10/The-Strange-Logo-Color-Large.png");
width: 330px;
}