mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Add BREAK!! character sheet files
This commit is contained in:
Aurelien Chabani
@@ -0,0 +1,545 @@
|
||||
:root {
|
||||
--pure-white: white;
|
||||
--light-white: #f5f5f5;
|
||||
--dark-white: #d3d3d3;
|
||||
--light-gray: #aaaaaa;
|
||||
--pure-gray: gray;
|
||||
--dark-gray: #2c2c2c;
|
||||
--light-black: #232323;
|
||||
--dark-black: #101010;
|
||||
--pure-black: black;
|
||||
}
|
||||
|
||||
/**** General stuff ***/
|
||||
.charsheet {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet {
|
||||
background-color: #1f1f1f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
flex-grow: 0;
|
||||
background-color: var(--dark-white);
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
color: var(--pure-black);
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet h1 {
|
||||
background-color: var(--dark-gray);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet h2 {
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet .sheet-tabButton {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet input[type="text"] {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet textarea {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet input[type="number"] {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet button[type="roll"] {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
background-position: -25px -25px;
|
||||
}
|
||||
|
||||
.sheet-darkmode .charsheet select {
|
||||
background-color: var(--light-black);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
/**** tabs handler ***/
|
||||
/*Configure the tab buttons*/
|
||||
.sheet-stats, .sheet-notes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sheet-tabstoggle[value="stats"]~div.sheet-stats,
|
||||
.sheet-tabstoggle[value="notes"]~div.sheet-notes {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* show the selected tab */
|
||||
|
||||
/**** sheet ***/
|
||||
/*Sheet layout*/
|
||||
.sheet-stats {
|
||||
flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sheet-notes {
|
||||
flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.sheet-mainPageUpperSide {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: stretch;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.sheet-attributeHeader {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
div.sheet-attributeBase {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-attributeBase input[type="number"] {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
background-color: var(--light-white);
|
||||
padding: 2px;
|
||||
border: 2px solid var(--pure-black);
|
||||
border-radius: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-attributeBase input[type="number"] {
|
||||
background-color: var(--light-black);
|
||||
border: 2px solid var(--pure-white);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-traitsList {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sheet-traitsList>div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
gap: 2px;
|
||||
border-bottom: 1px dashed var(--dark-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-traitsList>div {
|
||||
border-bottom: 1px dashed var(--light-black);
|
||||
}
|
||||
|
||||
.sheet-statButtons {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sheet-statButtons>div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-flexRow {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-flexRowNoGap {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sheet-flexEnd {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sheet-flexColumn {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-flexColumnNoGap {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sheet-flexRowInvert {
|
||||
display: flex;
|
||||
flex-flow: row-reverse nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-flexColumnInvert {
|
||||
display: flex;
|
||||
flex-flow: column-reverse nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.sheet-flexGrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sheet-flexShrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.sheet-flexIdentity {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.sheet-flexGrowFull {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sheet-stretch {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.sheet-2Row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 2%;
|
||||
}
|
||||
|
||||
.sheet-2RowItem {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: 48%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sheet-box {
|
||||
border: 1px solid var(--dark-white);
|
||||
padding: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-box {
|
||||
border-color: var(--dark-gray);
|
||||
}
|
||||
|
||||
.sheet-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/*Content*/
|
||||
|
||||
.sheet-oneLineInfo {
|
||||
border-top: 2px solid var(--dark-gray);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-oneLineInfo {
|
||||
border-top: 2px solid var(--dark-white);
|
||||
}
|
||||
|
||||
|
||||
.sheet-oneLineInfo>span {
|
||||
margin-right: 5px;
|
||||
flex-shrink: 0;
|
||||
width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-oneLineInfo>input {
|
||||
flex-grow: 1;
|
||||
border: none;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.sheet-multiLineInfo {
|
||||
border-top: 2px solid var(--dark-gray);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-multiLineInfo {
|
||||
border-top: 2px solid var(--dark-white);
|
||||
}
|
||||
|
||||
.sheet-multiLineInfo>span {
|
||||
margin-right: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-multiLineInfo>textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.sheet-attributeButton {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--pure-black);
|
||||
padding: 7px;
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%),
|
||||
linear-gradient(to bottom, rgba(216, 214, 214, 1) 0%, rgba(216, 214, 214, 1) 100%);
|
||||
background-clip: content-box, padding-box;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-attributeButton {
|
||||
border: 2px solid var(--pure-white);
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(35, 35, 35, 1) 0%, rgba(35, 35, 35, 1) 100%),
|
||||
linear-gradient(to bottom, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 1) 100%);
|
||||
color: var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-attributeButton:hover {
|
||||
border: 4px solid #3daade;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sheet-attributeModifier>input {
|
||||
flex-grow: 1;
|
||||
max-width: 420px;
|
||||
border: none;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.sheet-squares {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.sheet-squareInput[value="1"]~.sheet-square{
|
||||
border: 1px solid var(--light-white);
|
||||
background-color: var(--dark-black);
|
||||
}
|
||||
|
||||
.sheet-squareInput[value="0"]~.sheet-square{
|
||||
border: 1px solid var(--dark-black);
|
||||
background-color: var(--light-white);
|
||||
}
|
||||
|
||||
.sheet-square {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.health-heart {
|
||||
display: flex;
|
||||
width: 1px !important;
|
||||
height: 5px !important;
|
||||
}
|
||||
|
||||
.health-heart-input[value="1"]~.health-heart {
|
||||
background-color: var(--pure-black);
|
||||
}
|
||||
.health-heart-input[value="0"]~.health-heart {
|
||||
background-color: var(--pure-white);
|
||||
}
|
||||
.health-heart-input[value="-1"]~.health-heart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sheet-speedBox {
|
||||
background-color: var(--light-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-speedBox {
|
||||
background-color: var(--light-black);
|
||||
}
|
||||
|
||||
.sheet-speedBox:hover {
|
||||
border-color: #3daade;
|
||||
}
|
||||
|
||||
.sheet-speedBox[value="0"]~button.sheet-speedBox[value="0"],
|
||||
.sheet-speedBox[value="1"]~button.sheet-speedBox[value="1"],
|
||||
.sheet-speedBox[value="2"]~button.sheet-speedBox[value="2"],
|
||||
.sheet-speedBox[value="3"]~button.sheet-speedBox[value="3"] {
|
||||
background-color: var(--dark-white);
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-speedBox[value="0"]~button.sheet-speedBox[value="0"],
|
||||
.sheet-darkmode .sheet-speedBox[value="1"]~button.sheet-speedBox[value="1"],
|
||||
.sheet-darkmode .sheet-speedBox[value="2"]~button.sheet-speedBox[value="2"],
|
||||
.sheet-darkmode .sheet-speedBox[value="3"]~button.sheet-speedBox[value="3"] {
|
||||
background-color: var(--dark-gray);
|
||||
}
|
||||
|
||||
.sheet-leftSeparation {
|
||||
border-left: 2px solid var(--dark-white);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-leftSeparation {
|
||||
border-left: 2px solid var(--dark-gray);
|
||||
}
|
||||
|
||||
.sheet-rightSeparation {
|
||||
border-right: 2px solid var(--pure-black);
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.sheet-darkmode .sheet-rightSeparation {
|
||||
border-right: 2px solid var(--pure-white);
|
||||
}
|
||||
|
||||
.sheet-smallGap {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sheet-downGap {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.sheet-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-unscaledTextArea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.sheet-scalableTextArea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-container,
|
||||
.sheet-rolltemplate-generic .sheet-template-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
border: 1px solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-container,
|
||||
.sheet-rolltemplate-generic .sheet-template-container {
|
||||
border-color: #aaaaaa;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac.sheet-rolltemplate-darkmode .sheet-template-container,
|
||||
.sheet-rolltemplate-generic.sheet-rolltemplate-darkmode .sheet-template-container {
|
||||
border-color: #702c91;
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-rolls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-header,
|
||||
.sheet-rolltemplate-generic .sheet-template-header {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-header,
|
||||
.sheet-rolltemplate-generic .sheet-template-header {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac.sheet-rolltemplate-darkmode .sheet-template-header,
|
||||
.sheet-rolltemplate-generic.sheet-rolltemplate-darkmode .sheet-template-header {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-header h1,
|
||||
.sheet-rolltemplate-generic .sheet-template-header h1 {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-carac .sheet-template-contents,
|
||||
.sheet-rolltemplate-generic .sheet-template-contents {
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
+1494
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"html": "BREAK.html",
|
||||
"css": "BREAK.css",
|
||||
"authors": "Aurélien \"Wagi\" Chabani, Corentin \"Rezay\" Ciret",
|
||||
"roll20userid": "4842841, 1470591",
|
||||
"preview": "BREAK.png",
|
||||
"instructions": "**This is the first version of the BREAK!! character sheet for Roll20, created by Wagi with the help of Rezay.**\nThis sheet might be subject to later changes and updates.\nInternalization will come later, following any translation of the base game.\n\nIf you have any suggestions, please contact us on the BREAK!! Discord (https://discordapp.com/invite/SYkzXEF).\n\n**Thank you for using this sheet!**",
|
||||
"legacy": false
|
||||
}
|
||||
Reference in New Issue
Block a user