Files
roll20-character-sheets/Outbreak/outbreak.css

567 lines
21 KiB
CSS

* {
box-sizing: border-box; }
.charsheet {
background-color: #f9e0a8;
padding: 1%;
min-width: 850px;
font-family: "Courier New", Courier, monospace; }
button {
text-overflow: ellipsis; }
button:before {
display: none; }
button:focus > h3,
button:hover > h3,
button:active > h3 {
color: #bbb;
text-shadow: 1px 1px 2px #000, 0 0 25px #bbb, 0 0 5px #bbb; }
button[type='roll'], button[type='action'] {
background: #bbb;
border-bottom: 0.01em solid #666;
border-bottom-right-radius: 0.01em;
border-color: #b3b3b3;
border-radius: 0.25em;
border-right: 0.02em solid #333333;
border-style: outset;
margin: 0.2em !important;
padding: 0.1em !important; }
button[type='action'] {
background: #bbb; }
button[type='action']:focus, button[type='action']:hover, button[type='action']:active {
background-color: #00b300;
color: #bbb; }
button[type='roll'] {
background: #bbb; }
button[type='roll']:focus, button[type='roll']:hover, button[type='roll']:active {
background-color: #00b300;
color: #000; }
h2 {
font-size: 1em; }
label {
margin: 0px;
padding: 0px; }
input[type="number"], input[type="text"] {
padding: 1px 2px;
height: 100%;
width: 100% !important; }
input[disabled='true'] {
background-color: #77be7924;
cursor: not-allowed; }
select {
margin: 0px;
padding: 0px; }
textarea {
font-size: 1.1em;
font-weight: normal;
height: 50px;
line-height: 1.5em;
min-height: 50px;
overflow-wrap: break-word;
overflow: scroll;
padding: 2px;
resize: vertical;
text-align: left;
vertical-align: top;
white-space: pre-line; }
select {
width: 100%; }
.sheet-bold {
font-weight: bold; }
.sheet-dicefontd10 {
font-family: 'dicefontd10'; }
div.sheet-grid {
display: inline-grid;
grid-column-gap: 2%;
align-content: center; }
div.sheet-navigation {
grid-template-columns: 1fr 1fr 1fr; }
div.sheet-navigation input {
cursor: pointer;
height: 20px;
opacity: 0;
width: 100% !important;
z-index: 2; }
div.sheet-navigation input + span {
background: #c7c3b0;
border-radius: 4px;
color: #000;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
font-weight: bold;
height: 20px;
text-align: center;
width: 100px;
margin-left: 2%;
padding: 2% 1%; }
div.sheet-navigation input:checked + span {
background-color: #dcdcdc;
border-bottom-color: #fff; }
div.sheet-navigation input:nth-of-type(1), div.sheet-navigation span:nth-of-type(1) {
grid-area: 1 / 1 / 1; }
div.sheet-navigation input:nth-of-type(2), div.sheet-navigation span:nth-of-type(2) {
grid-area: 1 / 2 / 0.5; }
div.sheet-navigation input:nth-of-type(3), div.sheet-navigation span:nth-of-type(3) {
grid-area: 1 / 3 / 0.33333; }
.sheet-small-font {
font-size: 0.5em; }
.sheet-center {
text-align: center; }
div.sheet-container {
display: inline-block;
background-color: #e6e6e6;
width: 100%; }
div.sheet-container div {
width: 100%; }
div.sheet-container .sheet-green-header {
background-repeat: no-repeat;
background-position: center top;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/greenheader.png"); }
div.sheet-container .sheet-yellow-header {
background-repeat: no-repeat;
background-position: center top;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/yellowheader.png"); }
div.sheet-container div.sheet-main {
margin: 1%;
width: 98%; }
div.sheet-container div.sheet-main div.sheet-column {
display: inline-block;
vertical-align: top; }
div.sheet-container div.sheet-main div.sheet-column:nth-of-type(1) {
width: 59%; }
div.sheet-container div.sheet-main div.sheet-column:nth-of-type(2) {
width: 40%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-playerinfo {
grid-template-columns: 20% 1fr; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-playerinfo h2 {
font-weight: bolder; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-playerinfo h2:after {
content: ':'; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-playerinfo input {
border: 0px;
border-bottom: 0.15em solid #000;
border-radius: 0px; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox {
grid-row-gap: 2%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox h1 {
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox h2 {
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-dicetypes {
grid-template-columns: 1fr 1fr 1fr 1fr;
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-dicetypes img {
height: 30px;
width: 30px;
margin-left: 33%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-dicetypes div.sheet-attributes div.sheet-grid {
grid-template-columns: 1fr 1fr;
grid-column-gap: 2%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-dicetypes div.sheet-attributes div.sheet-grid input {
border: 0.15em solid #bbb;
font-size: 1em;
font-weight: bold;
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-dicetypes div.sheet-attributes div.sheet-grid input[name*='bonus'] {
border-color: #00b300; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-points {
grid-template-columns: 4fr 1fr 4fr 1fr 4fr 1fr;
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-points h3 {
font-size: 0.8em; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-points input {
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills {
grid-template-columns: 49% 49%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills h1, div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills h2 {
grid-column: 1 / 3; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills h2[data-i18n='Basic Skills'] {
line-height: inherit; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills button {
font-size: 0.8em; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills button > span {
font-weight: bold; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills label {
border: 0.15em solid #000; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills option[value*='strength'] {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Strength_40x40.png); }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills option[value*='perception'] {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Perception_40x40.png); }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills option[value*='empathy'] {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Empathy_40x40.png); }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills option[value*='willpower'] {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Willpower_40x40.png); }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills select {
font-size: 0.8em;
width: 100%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column button {
height: 2em;
text-align: left; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-header {
grid-template-columns: 1fr 15% 15%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-header h3 {
font-size: 0.8em;
text-align: center; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-header h3:nth-of-type(1) {
grid-area: 1 / 2 / 1 / 2; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-header h3:nth-of-type(2) {
grid-area: 1 / 3 / 1 / 3; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-skill {
grid-template-columns: 1fr 15% 15%;
display: inline-grid;
grid-column-gap: 1%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-skill label {
background-color: #fff; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-skill-column div.sheet-skill input {
border: none; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-repeating-container {
grid-column: 1 / 3;
margin-top: 2%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-repeating-container div.repitem {
margin-bottom: 2%; }
div.sheet-container div.sheet-main div.sheet-column div.sheet-spewbox div.sheet-skills div.sheet-repeating-container div.repitem label > span {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
background-color: #77be7924;
font-weight: normal;
padding-top: 10%; }
div.sheet-dice-box {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-row-gap: 2%; }
div.sheet-dice-box button {
grid-area: 1 / 1 / 1 / 5; }
div.sheet-dice-box img {
left: 5%;
margin-left: -5%;
position: relative;
top: 0px;
z-index: +1; }
div.sheet-dice-box select {
width: 65%; }
div.sheet-dice-box span[data-i18n='d5!'] {
margin-right: -10%; }
div.sheet-box {
box-sizing: border-box;
border: 10px solid transparent;
-webkit-border-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/background.png) 18 18 repeat;
box-shadow: 3px 5px 2px #888888;
float: left; }
div.sheet-dicelabel {
grid-auto-rows: min-content;
display: flex;
align-content: center;
justify-content: space-evenly;
height: 30px; }
div.sheet-dicelabel .info {
font-size: 1.5em;
font-family: "Pictos"; }
div.sheet-health h1, div.sheet-health h2 {
text-align: center; }
div.sheet-health div.sheet-header {
grid-template-columns: 1em 2fr 1fr;
text-align: center; }
div.sheet-health div.sheet-header h2[data-i18n='Injuries'] {
grid-column: 2; }
div.sheet-health div.sheet-header h2[data-i18n='Damage Threshold'] {
grid-column: 3;
line-height: inherit; }
div.sheet-health div.sheet-body {
grid-template-columns: 1em 2fr 1fr; }
div.sheet-health div.sheet-body h3 {
font-size: 0.8em;
line-height: inherit;
text-align: center; }
div.sheet-health div.sheet-body h3[data-i18n='Health Points'] {
text-orientation: mixed;
transform: rotate(180deg);
writing-mode: vertical-rl; }
div.sheet-health div.sheet-body div.sheet-injuries {
grid-template-columns: 15px 1fr;
grid-column-gap: 0.5%; }
div.sheet-health div.sheet-body div.sheet-injuries input[type='checkbox'] {
height: 15px;
width: 15px; }
div.sheet-health div.sheet-body div.sheet-injuries input[type='text'] {
margin-bottom: 2%; }
div.sheet-health div.sheet-body div.sheet-damage-threshold h3[data-i18n='Sb + Wb'] {
grid-area: 1 / 1 / 1 / 3; }
div.sheet-health div.sheet-body div.sheet-damage-threshold h3[data-i18n='Bonus'] {
grid-column: 1 / 4 / 1 / 4; }
div.sheet-health div.sheet-body div.sheet-damage-threshold input {
text-align: center; }
div.sheet-health div.sheet-viral h2[data-i18n='Symptoms'] {
text-align: left; }
div.sheet-health div.sheet-viral input[type="checkbox"] {
-webkit-appearance: initial;
appearance: initial;
background: none;
border: 1px solid black;
height: 19px;
position: relative;
width: 19px; }
div.sheet-health div.sheet-viral input[type="checkbox"]:checked {
background: #ccff33;
content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/virus.png);
border: none; }
div.sheet-health div.sheet-viral input[type="checkbox"]:checked:after {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%); }
div.sheet-health div.sheet-viral div.sheet-virus-checkboxes {
display: block;
text-align: center; }
div.sheet-health div.sheet-pysche {
grid-template-columns: 4fr 3fr 1fr 2fr 1fr 3fr; }
div.sheet-health div.sheet-pysche h1 {
grid-area: 1 / 1 / 1 / 7; }
div.sheet-health div.sheet-pysche h2[data-i18n='Wb + Eb'] {
grid-area: 2 / 2 / 2 / 2; }
div.sheet-health div.sheet-pysche h2[data-i18n='Bonus'] {
grid-area: 2 / 4 / 2 / 4; }
div.sheet-health div.sheet-pysche h2[data-i18n='Total'] {
grid-area: 2 / 6 / 2 / 6; }
div.sheet-health div.sheet-pysche h2[data-i18n='Coping Mechanisms'] {
grid-area: 4 / 1 / 4 / 7;
text-align: left; }
div.sheet-health div.sheet-pysche h2[data-i18n='Morale'] {
grid-area: 3 / 1 / 3 / 1;
line-height: inherit; }
div.sheet-health div.sheet-pysche input[type='number'] {
grid-row: 3;
text-align: center; }
div.sheet-health div.sheet-pysche span {
grid-row: 3;
margin-top: 40%;
text-align: center; }
div.sheet-health div.sheet-pysche textarea {
grid-area: 5 / 1 / 5 / 7; }
div.sheet-training-value h1 {
grid-column: 1 / 2;
font-size: 1.8em;
text-align: center; }
div.sheet-training-value div.sheet-red-kits {
grid-template-columns: 1fr 1fr; }
div.sheet-training-value div.sheet-red-kits img {
margin-left: 25%; }
div.sheet-training-value div.sheet-green-kits {
grid-template-columns: 1fr 1fr 1fr; }
div.sheet-training-value div.sheet-green-kits h2 {
font-size: 0.8em; }
div.sheet-training-value div.sheet-green-kits img {
margin-left: 20%; }
div.sheet-training-value div.sheet-kits {
margin-bottom: 5%; }
div.sheet-training-value div.sheet-kits h2 {
text-align: center;
line-height: inherit; }
div.sheet-training-value div.sheet-kits input {
height: 2.3em;
text-align: center;
width: 3em !important; }
div.sheet-repeating-container {
grid-template-columns: 4fr 2fr 2fr 10% 10% 1fr; }
div.sheet-repeating-container h3 {
font-size: 0.8em;
text-align: center; }
div.sheet-repeating-container button.sheet-dicefontd10 {
font-weight: bold;
text-align: center; }
div.sheet-repeating-container .repcontainer {
grid-column: 1 / 7; }
div.sheet-repeating-container .repcontainer .repitem {
display: inline-grid;
grid-template-columns: 4fr 2fr 2fr 10% 10% 1fr;
grid-column-gap: 1%; }
div.sheet-repeating-container .repcontainer .repitem input[type='number'] {
border: none; }
div.sheet-equipment textarea {
min-height: 100px; }
div.sheet-tab {
display: none; }
input[name='attr_tab'][value='main'] ~ div.sheet-main {
display: inline-block; }
input[name='attr_tab'][value='equipment'] ~ div.sheet-equipment {
display: inline-block; }
input[name='attr_tab'][value='log'] ~ div.sheet-log {
display: inline-block; }
.sheet-rolltemplate-ou table {
width: 189px;
height: 186px;
padding: 2px;
background-color: #e6e6e6;
background-size: 189px 186px;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
border-spacing: 0; }
.sheet-rolltemplate-ou-small table {
background-color: #e6e6e6;
width: 189px;
height: 186px;
padding: 4px;
background-size: 189px 186px;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
border-spacing: 0; }
.sheet-rolltemplate-ou th {
color: #145a32;
padding: 10px 2px 2px 20px;
line-height: 1.2em;
font-size: 1.2em;
text-align: left; }
.sheet-rolltemplate-ou td,
.sheet-rolltemplate-ou-small td {
padding-left: 10px;
font-size: 1.0em;
vertical-align: top; }
.sheet-rolltemplate-ou .sheet-resultr {
font-size: 1.5em;
font-family: 'Pictos';
text-align: center;
color: #C0392B;
/*color: rgb(20, 90, 50);*/
padding-bottom: 15px; }
.sheet-rolltemplate-ou .sheet-resultg {
font-size: 1.5em;
font-family: 'Pictos';
text-align: center;
color: #28B463;
/*color: rgb(20, 90, 50);*/
padding-bottom: 15px; }
.sheet-rolltemplate-ou .inlinerollresult {
background-color: transparent;
color: #000000;
border: none; }
.sheet-rolltemplate-ou .inlinerollresult.fullcrit {
background-color: #28B463;
color: #ffffff;
border: none; }
.sheet-rolltemplate-ou .inlinerollresult.fullfail {
background-color: #C0392B;
color: #ffffff;
border: none; }
.sheet-rolltemplate-ou .sheet-res .inlinerollresult.fullcrit,
.sheet-rolltemplate-ou .sheet-res .inlinerollresult.fullfail {
background-color: transparent;
color: black;
border: black; }
.sheet-rolltemplate-ou-small .sheet-diff .inlinerollresult,
.sheet-rolltemplate-ou .sheet-diff .inlinerollresult {
background-color: #000000;
color: #ffffff;
padding-bottom: 0px;
padding-top: 0px;
border: none; }
.sheet-rolltemplate-ou-small .sheet-speed .inlinerollresult,
.sheet-rolltemplate-ou .sheet-speed .inlinerollresult {
background-color: #104ac9;
color: #ffffff;
padding-bottom: 0px;
padding-top: 0px;
border: none; }
.sheet-rolltemplate-ou-small .sheet-damage .inlinerollresult,
.sheet-rolltemplate-ou .sheet-damage .inlinerollresult {
background-color: #ce3c2d;
color: #ffffff;
padding-bottom: 0px;
padding-top: 0px;
border: none; }
.sheet-rolltemplate-ou-small .sheet-deplete .inlinerollresult,
.sheet-rolltemplate-ou .sheet-deplete .inlinerollresult {
background-color: #ffffff;
color: #000000;
padding-bottom: 0px;
padding-top: 0px;
border: none; }
.sheet-rolltemplate-ou-small .sheet-speed-five .inlinerollresult.fullcrit,
.sheet-rolltemplate-ou .sheet-speed-five .inlinerollresult.fullcrit {
background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/HuntersIcon_speed_16pxW_x16pxH.jpg") bottom;
background-size: 19px 19px;
background-repeat: no-repeat;
z-index: +1;
font-size: 1.2em;
color: transparent; }
.sheet-rolltemplate-ou-small .sheet-damage-five .inlinerollresult.fullcrit,
.sheet-rolltemplate-ou .sheet-damage-five .inlinerollresult.fullcrit {
background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/HuntersIcon_damage_16pxW_x16pxH.jpg") bottom;
background-size: 19px 19px;
background-repeat: no-repeat;
z-index: +1;
font-size: 1.2em;
color: transparent; }
.sheet-rolltemplate-ou-small .sheet-deplete-five .inlinerollresult.fullcrit,
.sheet-rolltemplate-ou .sheet-deplete-five .inlinerollresult.fullcrit {
background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/HuntersIcon_depletion_16pxW_x16pxH.jpg") bottom;
background-size: 19px 19px;
background-repeat: no-repeat;
z-index: +1;
font-size: 1.2em;
color: transparent; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
input[type=number] {
-moz-appearance: textfield; }