mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 12:12:30 +00:00
BokuNC
89bf123715
This in a future proofing update for the Pokeymanz sheet. We cleaned some bugs, changed the images to pull directly from the GitHub folder and added some support for Dark Mode, enough to make the white background border disappear when the user change modes, enhancing the overall experience. We also added a Help Button that explain how some things of the sheet works and point to roll20 wiki for more detailed explanations.
600 lines
16 KiB
CSS
600 lines
16 KiB
CSS
/* Character Sheet Tabs - Pokemon vs Trainer*/
|
|
.charsheet {
|
|
width: 750px !important;
|
|
margin: 0 auto !important;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.sheet-darkmode {
|
|
background: #1f1f1f;
|
|
color: #c0c0c0;
|
|
}
|
|
.sheet-darkmode .sheetform {
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
/*Configure the tab buttons*/
|
|
.charsheet .sheet-character,
|
|
.charsheet .sheet-journal {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
|
|
display: block;
|
|
}
|
|
|
|
/* End of Character Sheet Tabs */
|
|
|
|
.sheetmagic {
|
|
position: relative;
|
|
margin: 0px;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.sheetmagic * {
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.sm-prop {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
position: absolute;
|
|
background: transparent !important;
|
|
box-shadow: none;
|
|
border: 0px solid rgba(0, 0, 0, 0.2);
|
|
color: black;
|
|
}
|
|
|
|
.sm-prop:focus {
|
|
background: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.sm-slt {
|
|
font-size: 16px;
|
|
resize: none;
|
|
text-align:center;
|
|
}
|
|
|
|
.sm-slt-white {
|
|
font-size: 16px;
|
|
resize: none;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
-webkit-text-fill-color: white;
|
|
opacity: 65%;
|
|
}
|
|
|
|
.sm-slt-red {
|
|
font-size: 16px;
|
|
resize: none;
|
|
text-align:center;
|
|
font-weight: bolder;
|
|
-webkit-text-fill-color: red;
|
|
opacity: 75%;
|
|
}
|
|
|
|
.sm-mlt {
|
|
font-size: 16px;
|
|
resize: none;
|
|
text-align:center;
|
|
}
|
|
|
|
.sm-mlt1 {
|
|
font-size: 16px;
|
|
resize: none;
|
|
text-align:justify;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.sm-num {
|
|
text-align: center;
|
|
}
|
|
|
|
.sm-roll {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sm-checkbox {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
}
|
|
|
|
.sm-checkbox:checked {
|
|
appearance: auto;
|
|
}
|
|
|
|
.sm-noedit {
|
|
border: none;
|
|
}
|
|
|
|
.character-avatar-profile
|
|
{
|
|
right: 8px;
|
|
top: 52px;
|
|
height: 160px;
|
|
width: 223px;
|
|
text-align:center;
|
|
}
|
|
|
|
.character-avatar-profile2
|
|
{
|
|
left: 607px;
|
|
top: 53px;
|
|
height: 134px;
|
|
width: 134px;
|
|
text-align:center;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type='number'] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
button[type='roll']::before {
|
|
content: '' !important;
|
|
}
|
|
|
|
.dropdown {
|
|
appearance: none;
|
|
}
|
|
|
|
/*--------------------------------CUSTOM ROLL TEMPLATE--------------------------------*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-custom {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-custom {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
border: 1px solid;
|
|
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
|
border-color: var(--header-bg-color);
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-custom .sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
/* change text-align to center to center the header text */
|
|
text-align: center;
|
|
color: var(--header-text-color);
|
|
padding: 5px;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-title {
|
|
font-size:1.1em;
|
|
font-weight: bold;
|
|
text-shadow: 0px 1px 5px black;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
/* example colors */
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
/* this is the default color */
|
|
--header-bg-color: #e3313f;
|
|
--header-text-color: #FFF;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-normal {
|
|
--header-bg-color: #919aa2;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-fire {
|
|
--header-bg-color: #ff9d55;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-water {
|
|
--header-bg-color: #5090d6;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-electric {
|
|
--header-bg-color: #f4d23c;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-grass {
|
|
--header-bg-color: #63bc5a;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-ice {
|
|
--header-bg-color: #73cec0;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-fighting {
|
|
--header-bg-color: #ce416b;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-poison {
|
|
--header-bg-color: #aa6bc8;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-ground {
|
|
--header-bg-color: #d97845;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-flying {
|
|
--header-bg-color: #94aade;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-psychic {
|
|
--header-bg-color: #fa7179;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-bug {
|
|
--header-bg-color: #91c12f;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-rock {
|
|
--header-bg-color: #c5b78c;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-ghost {
|
|
--header-bg-color: #5269ad;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-dragon {
|
|
--header-bg-color: #0b6dc3;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-dark {
|
|
--header-bg-color: #5a5465;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-steel {
|
|
--header-bg-color: #5a8ea2;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-fairy {
|
|
--header-bg-color: #ec8fe6;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-heart {
|
|
--header-bg-color: #ff3750;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-fitness {
|
|
--header-bg-color: #ff590b;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-research {
|
|
--header-bg-color: #3776ff;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-tactics {
|
|
--header-bg-color: #007500;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-custom .sheet-template-wrapper .sheet-content {
|
|
display: grid;
|
|
background: #fff6fb;
|
|
color: black;
|
|
/* Header formatting - modify the column layout below */
|
|
grid-template-columns: 50% 50%;
|
|
/* Line height to match default roll template */
|
|
line-height:1.4em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-custom .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-custom .sheet-value {
|
|
}
|
|
*/
|
|
|
|
.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult{
|
|
background-color: transparent;
|
|
color: #000000;
|
|
border-style: inset;
|
|
border-radius: 30% 30%;
|
|
border-width: 3px;
|
|
}
|
|
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-custom .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Images in Move Buttons*/
|
|
|
|
button[type="roll"].sheet-pokeball:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="roll"].sheet-pokeball:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/RollButton2.png");
|
|
background-size: 34px 34px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
button[type="roll"].sheet-pokeball{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/RollButton.png");
|
|
background-size: 34px 34px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
|
|
button[type="action"].sheet-pokemon:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-pokemon:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/poke-sheet-symbol.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-pokemon{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/trainer-sheet-symbol.png");
|
|
background-size: 34px 52px;
|
|
background-repeat: no-repeat;
|
|
width: 34px;
|
|
height: 52px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 80%;
|
|
}
|
|
|
|
button[type="action"].sheet-trainer:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-trainer:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/trainer-sheet-symbol.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-trainer{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/poke-sheet-symbol.png");
|
|
background-size: 34px 52px;
|
|
background-repeat: no-repeat;
|
|
width: 34px;
|
|
height: 52px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 80%;
|
|
}
|
|
|
|
button[type="roll"].sheet-help:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="roll"].sheet-help:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/help-button.png");
|
|
background-size: 89px 53px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0;
|
|
width: 89px;
|
|
height: 53px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="roll"].sheet-help{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/help-button.png");
|
|
background-size: 89px 53px;
|
|
background-repeat: no-repeat;
|
|
background-position: 0;
|
|
width: 89px;
|
|
height: 53px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
/* Trainer Inventory Tabs */
|
|
|
|
/*Configure the tab buttons*/
|
|
.charsheet .sheet-pokeballs,
|
|
.charsheet .sheet-medicines,
|
|
.charsheet .sheet-battleitems,
|
|
.charsheet .sheet-berries,
|
|
.charsheet .sheet-tmtrs,
|
|
.charsheet .sheet-treasures,
|
|
.charsheet .sheet-keys,
|
|
.charsheet .sheet-otheritems {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabsinvtoggle[value="pokeballs"] ~ div.sheet-pokeballs,
|
|
.charsheet .sheet-tabsinvtoggle[value="medicines"] ~ div.sheet-medicines,
|
|
.charsheet .sheet-tabsinvtoggle[value="battleitems"] ~ div.sheet-battleitems,
|
|
.charsheet .sheet-tabsinvtoggle[value="berries"] ~ div.sheet-berries,
|
|
.charsheet .sheet-tabsinvtoggle[value="tmtrs"] ~ div.sheet-tmtrs,
|
|
.charsheet .sheet-tabsinvtoggle[value="treasures"] ~ div.sheet-treasures,
|
|
.charsheet .sheet-tabsinvtoggle[value="keys"] ~ div.sheet-keys,
|
|
.charsheet .sheet-tabsinvtoggle[value="otheritems"] ~ div.sheet-otheritems {
|
|
display: block;
|
|
}
|
|
|
|
/* Custom inventory buttons */
|
|
|
|
button[type="action"].sheet-button-pokeballs:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-pokeballs:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Poke-Balls-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-pokeballs{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Poke-Balls-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-medicines:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-medicines:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Medicines-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-medicines{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Medicines-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-battleitems:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-battleitems:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Battle-Items-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-battleitems{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Battle-Items-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-berries:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-berries:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Berries-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-berries{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Berries-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-tmtrs:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-tmtrs:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/TRTM-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-tmtrs{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/TMTR-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-treasures:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-treasures:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Treasures-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-treasures{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Treasures-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-keys:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-keys:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Key-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-keys{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Key-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-otheritems:before{
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].sheet-button-otheritems:hover{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Others-selected.png");
|
|
opacity: 100%;
|
|
}
|
|
|
|
button[type="action"].sheet-button-otheritems{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Others-float.png");
|
|
background-size: 35px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 35px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 0px;
|
|
opacity: 60%;
|
|
}
|
|
|
|
/* End of Trainer Inventory Tabs */
|
|
|
|
body.sheet-darkmode .charsheet {
|
|
color: #eee
|
|
} |