mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 04:02:29 +00:00
Pantoufle
6c3efb1c41
* Abstract Dungeon
Creation of a sheet for Abstract Dungeon RPG
* Changes needed
Tables removed
CSS reduction
add of a translation term
* Upgraded version
Upgrades :
Added a NPC tab Sheet with roll-template to display a chat review of the NPC
Simplified dice gestion
Added config access out of the game
Improved translation possibilities
* Revert "Upgraded version"
This reverts commit ecb4477615.
* Update
Upgrades :
Added a NPC tab Sheet with roll-template to display a chat review of the NPC
Simplified dice gestion
Added config access out of the game
Improved translation possibilities
* Update Abstract.JPG
* Update
Hello,
Here is a little update to add the game's name as an input so that people who don't want to see Abstract Dungeon on the sheet while playing Abstract Spandex or whatever can do so ! :)
Also add a little CSS to always get the move/delete options from repeating sections on top of everything.
Cheers :)
Pantoufle
* Update Abstract_HTML.html
* Creation of a FACES sheet
FACES is a french RPG. This is a sheet for it with the blessing of its author James Tornade.
* Rename FACES_TRANSLATION.json to translation.json
* Update after release
Changed the links to img to the Roll20 folder
Change an autocalc field to a sheetworker
361 lines
9.0 KiB
CSS
361 lines
9.0 KiB
CSS
/* GLOBAL SETTINGS
|
|
============================= */
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif; }
|
|
|
|
.sheet-container {
|
|
max-width:1100px;
|
|
min-width:1100px;
|
|
border-image-source: url(http://imgsrv.roll20.net/?src=raw.githubusercontent.com/Roll20/roll20-character-sheets/master/FACES%2520%28French%29/FACES_png.png);
|
|
border-image-slice: 45 55 50 55;
|
|
border-image-width: 2%;
|
|
border-image-outset: 10px 20px 10px 20px;
|
|
border-image-repeat: round;
|
|
}
|
|
|
|
button:before {
|
|
display: none; }
|
|
button:focus, button:hover, button:active {
|
|
background: none;
|
|
background-color: black !important; }
|
|
button:focus, button:hover, button:active, button:focus > h2, button:hover > h2, button:active> h2,
|
|
.sheet-tabs button:focus, .sheet-tabs button:hover, .sheet-tabs button:active,
|
|
.sheet-pc button:focus, .sheet-pc button:hover, .sheet-pc button:active {
|
|
color: whitesmoke;
|
|
text-shadow: 1px 1px 2px black, 0 0 25px rgba(181, 181, 181, 0.25), 0 0 5px #dbdbdb; }
|
|
button[type="roll"], button[type="action"] {
|
|
background-color: whitesmoke;
|
|
border-bottom: 0.01em solid #666;
|
|
border-bottom-right-radius: 0.01em;
|
|
border-color: black;
|
|
border-radius: 0.25em;
|
|
border-right: 0.02em solid #333333;
|
|
border-style: outset;
|
|
color: black;
|
|
margin: 0.2em !important;
|
|
padding: 0.1em !important; }
|
|
|
|
div {
|
|
background-color: transparent;
|
|
width: 100%; }
|
|
|
|
fieldset {
|
|
background-color: transparent; }
|
|
|
|
h1 {
|
|
color: black;
|
|
text-transform: uppercase; }
|
|
|
|
h2 {
|
|
font-size: 1em;
|
|
line-height: 1.4em;
|
|
color: black;}
|
|
h2.sheet-label {
|
|
border-bottom: 0.15em solid black;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
text-align: center;
|
|
margin-left: 3%; }
|
|
|
|
h3 {
|
|
font-size: 1.25em;
|
|
line-height: 36px; }
|
|
|
|
input[type="text"], input[type="number"] {
|
|
background-color: transparent;
|
|
-moz-appearance: textfield;
|
|
border-bottom: 0.15em solid black;
|
|
text-align: center;
|
|
border-left: 0em;
|
|
border-radius: 0em;
|
|
border-right: 0em;
|
|
border-top: 0em;
|
|
height: 2.1em;
|
|
font-size: 1.25em;}
|
|
input::placeholder {
|
|
background-color: rgba(181, 181, 181, 0.25);
|
|
border: 0.1em dotted black; }
|
|
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0; }
|
|
|
|
input[type="number"] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input.sheet-talent {
|
|
font-size: 1em;
|
|
height: 1.6em;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0px;
|
|
padding-right: 0px; }
|
|
|
|
span {
|
|
word-break: break-word; }
|
|
|
|
textarea {
|
|
text-align: left;
|
|
border-bottom: 0.2em dotted #e3e3e3;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
height: 50px;
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
padding: 2px;
|
|
resize: vertical;
|
|
vertical-align: top;
|
|
white-space: pre-line; }
|
|
|
|
.charsheet {
|
|
min-width: 30em; }
|
|
|
|
/* FLEXBOX
|
|
============================= */
|
|
div.sheet-flex {
|
|
align-content: flex-start;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
max-width: 100%;
|
|
vertical-align: top; }
|
|
|
|
div.sheet-attribute-flex {
|
|
align-content: flex-start;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
div.sheet-flex-item {
|
|
flex:1 1 auto;
|
|
}
|
|
|
|
div.sheet-logo-flex {
|
|
justify-content: center
|
|
}
|
|
|
|
div.sheet-pc-flex {
|
|
display: inline-flex; }
|
|
|
|
div.sheet-container-flex {
|
|
justify-content:space-evenly
|
|
}
|
|
|
|
/* HIDE DIFFERENT SHEET TYPES BY DEFAULT
|
|
============================= */
|
|
div.sheet-config,
|
|
div.sheet-pc, div.sheet-notes {
|
|
display: none; }
|
|
|
|
input.sheet-type[value="config"] ~ div.sheet-config,
|
|
input.sheet-type[value="character"] ~ div.sheet-pc,
|
|
input.sheet-type[value="notes"] ~ div.sheet-notes{
|
|
display: block; }
|
|
|
|
/* GRID
|
|
============================= */
|
|
div.sheet-grid {
|
|
display: inline-grid;
|
|
grid-column-gap: 0.2em;
|
|
grid-row-gap: 0.2em;}
|
|
|
|
div.sheet-grid-tab-inputs label:nth-of-type(1) {
|
|
grid-area: 1 / 2 / 1 / 2; }
|
|
div.sheet-grid-tab-inputs span:nth-of-type(1) {
|
|
grid-area: 1 / 1 / 1 / 1; }
|
|
div.sheet-grid-tab-inputs label:nth-of-type(2) {
|
|
grid-area: 2 / 2 / 2 / 2; }
|
|
div.sheet-grid-tab-inputs span:nth-of-type(2) {
|
|
grid-area: 2 / 1 / 2 / 1; }
|
|
div.sheet-grid-tab-inputs label:nth-of-type(3) {
|
|
grid-area: 3 / 2 / 3 / 2; }
|
|
div.sheet-grid-tab-inputs span:nth-of-type(3) {
|
|
grid-area: 3 / 1 / 3 / 1; }
|
|
|
|
/* HIGHLIGHT BUTTONS
|
|
============================= */
|
|
input.sheet-type[value="character"] ~ div.sheet-tabs button[name*="character"],
|
|
input.sheet-type[value="config"] ~ div.sheet-tabs button[name*="config"],
|
|
input.sheet-type[value="notes"] ~ div.sheet-tabs button[name*="notes"] {
|
|
background-color: black;
|
|
box-shadow: inset 0px 0px 3px 1px rgba(181, 181, 181, 0.25);
|
|
color: whitesmoke; }
|
|
|
|
/* TABS & LOGO SECTION
|
|
============================= */
|
|
div.sheet-tabs label > input {
|
|
width: 100%; }
|
|
|
|
/* INPUTS FOR CHARACTER, PLAYER, NOTES..... */
|
|
div.sheet-grid-tab-inputs {
|
|
grid-template-columns: 8em 1fr; }
|
|
|
|
div.sheet-grid-tab-inputs span {
|
|
font-weight: bold;
|
|
text-transform: uppercase; }
|
|
|
|
div.sheet-grid-tab-buttons {
|
|
grid-template-columns: 5em 5em 5em;
|
|
margin-top: 2%; }
|
|
|
|
div.sheet-grid-tab-buttons button[name*="character"],
|
|
div.sheet-grid-tab-buttons button[name*="config"],
|
|
div.sheet-grid-tab-buttons button[name*="notes"]{
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
font-variant: small-caps; }
|
|
|
|
/* CONFIG SHEET
|
|
============================= */
|
|
input.sheet-customcheck[value="1"] ~ div.sheet-custom {
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-customcheck[value="1"] ~ div.sheet-nocustom {
|
|
display: none;
|
|
}
|
|
|
|
div.sheet-custom {
|
|
display: none;
|
|
}
|
|
|
|
/* PC SHEET
|
|
============================= */
|
|
div.sheet-grid-header {
|
|
grid-template-columns: 1em 1fr; }
|
|
div.sheet-grid-header button {
|
|
grid-area: 1 / 1 / 1 / 1; }
|
|
div.sheet-grid-header h1 {
|
|
grid-area: 1 / 2 / 1 / 3; }
|
|
|
|
.sheet-grid-pc {
|
|
grid-template-columns: 250px 340px 250px;
|
|
}
|
|
|
|
div.sheet-pc-flex {
|
|
border: 0.15em solid black;
|
|
border-radius: 0.8em; }
|
|
|
|
|
|
/* ATTRIBUTES
|
|
----------------------------- */
|
|
div.sheet-grid-pc-attributes {
|
|
grid-template-columns: repeat(2,8em 6em);
|
|
grid-template-rows: 6em;
|
|
}
|
|
div.sheet-grid-pc-attributes2 {
|
|
grid-template-columns: repeat(2,8em 6em);
|
|
}
|
|
div.sheet-grid-pc-attributes button[type="roll"], div.sheet-grid-pc-attributes2 button[type="roll"] {
|
|
border-bottom-left-radius: 0em;
|
|
border-bottom-right-radius: 0em;
|
|
border-bottom: 0.15em solid black;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
height: 100%;}
|
|
div.sheet-grid-pc-attributes input[type="text"], div.sheet-grid-pc-attributes2 input[type="text"] {
|
|
width: 3.5em; }
|
|
|
|
/* AUTOEXPAND
|
|
----------------------------- */
|
|
.sheet-auto-expand {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
min-height: 20px;
|
|
}
|
|
.sheet-auto-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
.sheet-auto-expand textarea {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
padding: inherit;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
}
|
|
|
|
/* NOTE
|
|
----------------------------- */
|
|
div.sheet-grid-note {
|
|
grid-template-columns: 25% 25% 25% 1fr; }
|
|
|
|
/* ROLL TEMPLATE
|
|
----------------------------- */
|
|
|
|
.sheet-rolltemplate-face div.sheet-face_container, .sheet-rolltemplate-damage div.sheet-face_container,
|
|
.sheet-rolltemplate-minisheet div.sheet-face_container, .sheet-rolltemplate-minisheet2 div.sheet-face_container {
|
|
border: 2px solid black !important;
|
|
border-radius: 7px;
|
|
z-index:1;
|
|
background-color: #F8F8FF;
|
|
}
|
|
|
|
.sheet-rolltemplate-face .sheet-face_header, .sheet-rolltemplate-damage .sheet-face_header,
|
|
.sheet-rolltemplate-minisheet .sheet-face_header, .sheet-rolltemplate-minisheet2 .sheet-face_header {
|
|
background-color: black;
|
|
padding: 2px;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 5px 5px 0px 0px;
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-face div.sheet-face_rowcolor1, .sheet-rolltemplate-damage div.sheet-face_rowcolor1{
|
|
border-bottom: 1px solid black;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.sheet-rolltemplate-minisheet div.sheet-face_rowcolor1, .sheet-rolltemplate-minisheet2 div.sheet-face_rowcolor1 {
|
|
border-bottom: 1px solid black;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-face a[href^="~"], .sheet-rolltemplate-minisheet a[href^="~"], .sheet-rolltemplate-minisheet2 a[href^="~"] {
|
|
background-color: black;
|
|
color: #F8F8FF;
|
|
padding: 2px 4px 1px 4px;
|
|
margin: 2px -1px 1px 0px;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
border: 1px solid #789;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-face a[href^="~"]:hover, .sheet-rolltemplate-minisheet a[href^="~"]:hover, .sheet-rolltemplate-minisheet2 a[href^="~"]:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
color: #f00;
|
|
box-shadow: 1px 1px 2px #333;
|
|
}
|
|
|
|
/* FOOTER
|
|
============================= */
|
|
|