Files
roll20-character-sheets/CypherSystem/CypherSystem.css
T
Nathanaël TERRIEN 2234bf7f38 Cypher System v1.3
Corrected roll with difficulty and inability: now compute the total difficulty
Replace "Action" parameter inputs by drop-down lists, to ensure that Roll20 updates correctly the attributes
Negative edge allowed (handicaps)
Removed the word "target" from the HTML and template roll code to avoid confusion with the Roll20 keyword "Target", allowing to create custom macros
2015-11-13 20:02:15 +01:00

608 lines
16 KiB
CSS

/************* 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,
input[type=radio].sheet-styleNpc{
margin-left: 10px;
margin-right: 2px;
}
input[type=radio].sheet-styleCypher + span,
input[type=radio].sheet-styleNumenera + span,
input[type=radio].sheet-styleTheStrange + span,
input[type=radio].sheet-styleNpc + span{
font-size:11px;
color: #888888;
text-align:left;
}
input[type=radio].sheet-styleNumenera:checked ~ .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=radio].sheet-styleNpc:checked ~ .sheet-main{
display: none;
}
input[type=radio].sheet-styleCypher:checked ~ .sheet-npc,
input[type=radio].sheet-styleNumenera:checked ~ .sheet-npc,
input[type=radio].sheet-styleTheStrange:checked ~ .sheet-npc{
display: none;
}
input[type=radio].sheet-styleNpc:checked ~ .sheet-npc{
display: inherit;
}
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;
}
select.sheet-selaction{
width: 40px;
height: 18px;
line-height: 18px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
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;
}
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;
}
img.sheet-gamelogoCypher{
width: 330px;
display: none;
}
img.sheet-gamelogoNumenera{
width: 330px;
display: none;
}
img.sheet-gamelogoTheStrange{
width: 330px;
display: none;
}
input[type=radio].sheet-styleCypher:checked ~ div.sheet-main img.sheet-gamelogoCypher{
display: block;
}
input[type=radio].sheet-styleNumenera:checked ~ div.sheet-main img.sheet-gamelogoNumenera{
display: block;
}
input[type=radio].sheet-styleTheStrange:checked ~ div.sheet-main img.sheet-gamelogoTheStrange{
display: block;
}
/* 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-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-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-cyphBasicRoll tr {
border-left: 1px solid #4E686A;
border-right: 1px solid #4E686A;
}
.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-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-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-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;
}