mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
576 lines
21 KiB
CSS
576 lines
21 KiB
CSS
/*========================================================================*/
|
|
/*== General Styles ======================================================*/
|
|
/*========================================================================*/
|
|
|
|
.cartel {
|
|
position: relative;
|
|
|
|
--title-color: Teal;
|
|
--title-color-tint: PaleTurquoise;
|
|
--border-color: FireBrick;
|
|
--border-color-tint: #cfafaf;
|
|
--bg-color: WhiteSmoke;
|
|
--bg-color2: Snow;
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display&display=swap');
|
|
|
|
background-color: var(--bg-color2);
|
|
|
|
border: 5px double var(--border-color);
|
|
font-family: Garamond;
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
.cartel h1, .cartel h2 {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.cartel label[title],
|
|
.cartel summary[title] { cursor: context-menu; }
|
|
.cartel input.hidden_control { display: none; }
|
|
|
|
.cartel blockquote {
|
|
border: 1px solid LightGray;
|
|
background-color: var(--bg-color2);
|
|
font-size: 90%;
|
|
}
|
|
|
|
.cartel details.expandable summary {
|
|
position: relative;
|
|
height: 75px; overflow: auto;
|
|
border: 1px dotted SlateGray;
|
|
padding: 15px; margin: 0;
|
|
cursor: zoom-in;
|
|
}
|
|
.cartel details.expandable[open] summary {
|
|
height: auto; overflow: initial;
|
|
cursor: zoom-out;
|
|
}
|
|
.cartel details.expandable summary:before {
|
|
display: block; position: absolute; top: 0; right: 0;
|
|
font-family: Pictos; content: "s";
|
|
}
|
|
.cartel details.expandable[open] summary:before { content: "*"; }
|
|
|
|
.cartel .row { display: flex; flex-flow: row nowrap; }
|
|
|
|
.cartel .tabpage { padding: 10px; background-color: var(--bg-color); }
|
|
|
|
/* roll buttons */
|
|
/* .charsheet .cartel button[type="roll"] { display: inline-block; } */
|
|
.charsheet .cartel button[type="roll"]:before {
|
|
font-family: dicefontd6; content: "mf";
|
|
}
|
|
|
|
/* make sure the repeating controls stay accessible */
|
|
.charsheet .cartel .repcontrol, .charsheet .cartel .itemcontrol { z-index: 10; }
|
|
|
|
/* style inputs that have datalist options */
|
|
.charsheet .cartel input[type="text"][list] { cursor: context-menu; }
|
|
.charsheet .cartel input[type="text"][list] + span:before { font-family: Pictos; content: "l"; }
|
|
|
|
.cols2 { column-count: 2; column-width: 300px; }
|
|
.cols2 .repcontrol {}
|
|
.cols2 section { break-inside: avoid; }
|
|
|
|
main.flexpage { display: flex; flex-flow: row nowrap; }
|
|
main.flexpage .repcontrol {}
|
|
|
|
/*========================================================================*/
|
|
/*== Collapsible Rules Boxes ===========================================*/
|
|
.cartel details.rulesbox summary {
|
|
cursor: pointer;
|
|
}
|
|
.cartel details.rulesbox summary * {
|
|
display: inline-block;
|
|
}
|
|
.cartel details.rulesbox summary:after {
|
|
font-family: Pictos; content: "?";
|
|
vertical-align: super;
|
|
}
|
|
.cartel .rules_text {
|
|
border: 1px solid Gray;
|
|
margin: 5px; padding: 5px;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== EDIT BOXES ========================================================*/
|
|
|
|
/* controls */
|
|
.charsheet .cartel .editbox,
|
|
.charsheet .cartel li.editbox {
|
|
position: relative;
|
|
margin: 5px; padding: 5px; padding-right: 30px;
|
|
}
|
|
.charsheet .cartel .editbox summary {
|
|
position: absolute;
|
|
top: 5px; right: 5px;
|
|
}
|
|
.charsheet .cartel .editbox summary:before {
|
|
display: block;
|
|
border: 1px solid black; padding: 1px;
|
|
width: 16px; height: 16px; font-size: 12px;
|
|
font-weight: bold;
|
|
text-align: center; vertical-align: top;
|
|
font-family: Pictos; content: "p";
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .cartel .editbox details[open] summary:before { content: "*"; cursor: pointer; }
|
|
.charsheet .cartel .editbox details[open] {
|
|
position: relative;
|
|
margin: 10px; padding: 10px;
|
|
border: 1px dotted var(--border-color);
|
|
}
|
|
|
|
.charsheet .cartel .editbox summary:hover {
|
|
}
|
|
|
|
.charsheet .cartel details.editbox textarea {
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== TRACKS ============================================================*/
|
|
|
|
.track { margin: 10px 30px; }
|
|
input.attr_track0 { display: none; } /* Zero value radio is for reseting the track */
|
|
input.attr_track { opacity: 0; z-index: 1; width: 20px; height: 20px; margin: 0; padding: 0; }
|
|
input.attr_track + span { display: inline-block; padding: 0; margin: 0; }
|
|
|
|
/* all boxes look "checked" by default
|
|
boxes to the right of the selected box will be "cleared" */
|
|
input.attr_track + span:before {
|
|
display: inline-block;
|
|
font-size: 17px; height: 17px; line-height: 17px; width: 17px;
|
|
border: 2px solid var(--title-color); padding 2px;
|
|
margin: 0 10px 0 -20px; /* 10px between the boxes */
|
|
text-align: center; font-family: "Pictos Custom"; content: "t"; color: var(--border-color); font-weight: bold; }
|
|
input.attr_track[type="radio"]:checked ~ input.attr_track + span:before { color: transparent; }
|
|
|
|
input.attr_track:hover + span:before { background-color: grey; }
|
|
|
|
input.attr_trackreset { display: none; }
|
|
|
|
/*========================================================================*/
|
|
/*== Checklists ========================================================*/
|
|
.list_title { margin-top: 15px; font-size: 14px; font-family: Garamond; font-weight: bold; }
|
|
ul.checklist { list-style: none; }
|
|
ul.checklist label { font-weight: normal; font-size: 100%; }
|
|
ul.checklist input[type="checkbox"] { display: none; }
|
|
ul.checklist input[type="checkbox"] + span {
|
|
display: inline-block; height: 14px; font-size: 16px;
|
|
margin-left: 22px; text-indent: -22px;
|
|
padding: 1px;
|
|
}
|
|
ul.checklist input[type="checkbox"] + span:before {
|
|
width: 14px; margin-top: -2px; margin-right: 5px; border: 2px solid var(--title-color);
|
|
font-family: "Pictos Custom"; content: "t"; color: transparent;
|
|
text-align: center; vertical-align: top;
|
|
}
|
|
ul.checklist input[type="checkbox"]:checked + span:before { color: var(--border-color); }
|
|
ul.checklist input[type="checkbox"]:checked + span { background-color: LightGray; color: Gray; text-decoration: line-through; }
|
|
|
|
/*-- picklist: instead of crossing items off, select from a list --*/
|
|
ul.checklist.picklist span { opacity: 0.5; color: Gray; font-style: italic; }
|
|
ul.checklist.picklist span i { font-style: normal; }
|
|
ul.checklist.picklist input + span:before {
|
|
font-family: "Pictos Custom"; content: "["; font-style: normal;
|
|
}
|
|
ul.checklist.picklist input:checked + span {
|
|
opacity: 1.0;
|
|
text-decoration: none;
|
|
color: var(--border-color); background-color: initial;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== Tag Lists =========================================================*/
|
|
span.tags { display: inline-block; font-weight: normal; text-indent: 20px; }
|
|
span.tags:before {}
|
|
span.tags:after { font-family: Pictos; content: "z"; vertical-align: super;}
|
|
|
|
/*========================================================================*/
|
|
/*== Label Cloud ========================================================*/
|
|
.label_cloud { display: flex; flex-flow: row wrap; justify-content: center; gap: 0.5em; font-size: 12px; margin-bottom: 25px; }
|
|
.label_cloud label {
|
|
display: inline-block;
|
|
width: auto; font-weight: normal;
|
|
margin: 0; padding: 0;
|
|
}
|
|
.label_cloud input[type="checkbox"] { display: none; }
|
|
.label_cloud input[type="checkbox"] + span {
|
|
display: inline-block;
|
|
border: 1px solid transparent; border-radius: 8px;
|
|
padding: 1px 3px;
|
|
color: Gray;
|
|
}
|
|
.label_cloud input[type="checkbox"]:checked + span {
|
|
font-size: 125%;
|
|
color: var(--border-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== Label Rows ========================================================*/
|
|
.label_row { display: flex; flex-flow: row nowrap; }
|
|
.label_row label {
|
|
display: inline-block; width: auto;
|
|
margin-right: 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== HEADER ============================================================*/
|
|
/*========================================================================*/
|
|
|
|
.charsheet .cartel > header.editbox { padding: 0; margin: 0; }
|
|
|
|
/* .charsheet .cartel > header + * { margin-top: 20px; }*/
|
|
|
|
.identity {
|
|
margin: 0 20px 0px;
|
|
display: flex;
|
|
}
|
|
|
|
dl.description span.lifestyle_description:before { content: "("; }
|
|
dl.description span.lifestyle_description:after { content: ")"; }
|
|
|
|
.charsheet .cartel > header .identity:first-child {
|
|
font-family: Candal;
|
|
color: var(--title-color);
|
|
border-bottom: 5px dotted var(--border-color);
|
|
margin: 10px;
|
|
}
|
|
.charsheet .cartel > header h1,
|
|
.charsheet .cartel > header h2 {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.charsheet .cartel > header dl.description { display: flex; gap: 0.5em; }
|
|
.charsheet .cartel > header dl.description * { display: inline-block; }
|
|
.charsheet .cartel > header dl.description dt { margin-left: 1em; }
|
|
.charsheet .cartel > header dl.description dd span:before { content("—"); }
|
|
|
|
.editlifestyle { display: flex; }
|
|
.editlifestyle label { flex-basis: 0; padding: 5px 20px; }
|
|
.editlifestyle input { display: none; }
|
|
.editlifestyle input + span { font-weight: normal; }
|
|
.editlifestyle input:checked + span { padding: 5px 10px; border: 1px solid SlateGray; border-radius: 7.5px; }
|
|
|
|
input.pbfilter { display: none; }
|
|
|
|
/*========================================================================*/
|
|
/*== TABS (Navigation) =================================================*/
|
|
/*========================================================================*/
|
|
|
|
.tabs {
|
|
display: flex; flex-flow: row nowrap; justify-content: flex-end;
|
|
padding: 0; margin: 0;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
input.attr_showtab[value="stats"] + .tabs button[name="act_stats"],
|
|
input.attr_showtab[value="character_moves"] + .tabs button[name="act_character_moves"],
|
|
input.attr_showtab[value="extras"] + .tabs button[name="act_extras"],
|
|
input.attr_showtab[value="basic_moves"] + .tabs button[name="act_basic_moves"],
|
|
input.attr_showtab[value="stress_heat"] + .tabs button[name="act_stress_heat"],
|
|
input.attr_showtab[value="notes"] + .tabs button[name="act_notes"] {
|
|
background-color: var(--bg-color);
|
|
z-index: 1;
|
|
margin: 0 10px -2px;
|
|
border-bottom: 2px solid var(--bg-color);
|
|
}
|
|
|
|
.tabs button {
|
|
padding: 2px 15px 0; margin: 0 1px;
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 10px 10px 0 0;
|
|
border-bottom: none;
|
|
font-family: Garamond;
|
|
font-size: 16px; font-weight: normal;
|
|
background-color: #afcfcf;
|
|
}
|
|
.tabs button:hover { background-color: #dfecec; }
|
|
|
|
.tabpage { display: none; }
|
|
|
|
input.attr_showtab[value="stats"] ~ .statspage,
|
|
input.attr_showtab[value="character_moves"] ~ .character_movespage,
|
|
input.attr_showtab[value="extras"] ~ .extraspage,
|
|
input.attr_showtab[value="basic_moves"] ~ .basic_movespage,
|
|
input.attr_showtab[value="stress_heat"] ~ .stress_heatpage,
|
|
input.attr_showtab[value="notes"] ~ .notespage
|
|
{ display: block; }
|
|
|
|
/*========================================================================*/
|
|
/*== STATS =============================================================*/
|
|
/*========================================================================*/
|
|
|
|
.charsheet .statspage main { display: flex; flex-flow: row wrap; }
|
|
.charsheet .statspage main .left,
|
|
.charsheet .statspage main .right { min-width: 300px; flex: 1 0 0; padding: 0 20px; margin: 0; }
|
|
.charsheet .statspage main section { border-top: 1px dotted var(--border-color); margin-bottom: 15px; }
|
|
.statsrow {
|
|
display: flex; gap: 5px;
|
|
}
|
|
.statsrow label {
|
|
display: inline-block; width: auto;
|
|
border: 2px solid var(--border-color);
|
|
background-color: Snow;
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.statsrow button { margin: 5px; }
|
|
.statsrow button:before { font-size: 150%; }
|
|
|
|
/*========================================================================*/
|
|
/*== ENLACES ===========================================================*/
|
|
.charsheet .enlaces li.editbox {
|
|
border: 1px solid rgba( 128, 128, 128, 0.25);
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
list-style: none;
|
|
}
|
|
.charsheet .enlaces li.editbox:before {
|
|
font-family: Pictos; content: "j"; font-size: 20px;
|
|
position: absolute; top: 5px; left: -25px;
|
|
}
|
|
|
|
.rel_name { font-weight: bold; font-size: 115%; }
|
|
.enlaces li.editbox { padding-right: 25px; }
|
|
.enlaces li.editbox .sentence-display {
|
|
display: inline-block; margin-right: 25px;
|
|
}
|
|
|
|
|
|
/*========================================================================*/
|
|
/*== LLAVES ==*/
|
|
.charsheet .cartel .llaves .repcontrol { z-index: 10; }
|
|
|
|
.keybox { padding-right: 0; }
|
|
.keybox label { padding-left: 30px; }
|
|
.keybox label span:last-child { font-weight: normal; padding-right: 25px; }
|
|
.keybox label input { display: none; }
|
|
.keybox label input:checked ~ span {
|
|
/* background-color: LightGray; */
|
|
color: SlateGray;
|
|
opacity: 0.5;
|
|
text-decoration: line-through;
|
|
}
|
|
.keybox label input + span:before {
|
|
position: absolute; top: 10px; left: 0;
|
|
float: right;
|
|
display: inline-block; width: 18px; height: 18px;
|
|
border: 2px solid var(--title-color);
|
|
padding: 1px; margin-right: 5px;
|
|
font-family: "Pictos Custom"; color: transparent; content: "t";
|
|
font-size: 20px; text-align: center;
|
|
}
|
|
.keybox label input:checked + span:before {
|
|
color: var(--border-color);
|
|
}
|
|
.keybox label input + span:after { content: ":"; }
|
|
|
|
|
|
.keybox.editbox details[open] {
|
|
position: relative;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== ADVANCEMENT ==*/
|
|
|
|
.advancement ul.advlist { list-style-type: none; }
|
|
.advancement ul.advlist label { font-weight: normal; font-size: 100%; }
|
|
|
|
ul.advlist input[type="checkbox"] { display: none; }
|
|
ul.advlist input[type="checkbox"] + span:before {
|
|
display: inline-block;
|
|
width: 14px; height: 14px; font-size: 16px; padding: 1px;
|
|
margin-right: 5px;
|
|
border: 2px solid var(--title-color);
|
|
font-family: "Pictos Custom"; content: "t"; color: transparent;
|
|
text-align: center; vertical-align: middle;
|
|
}
|
|
ul.advlist input[type="checkbox"]:checked + span:before {
|
|
color: var(--border-color);
|
|
}
|
|
ul.advlist input[type="checkbox"]:checked + span {
|
|
background-color: LightGray; color: Gray; text-decoration: line-through;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/*== Character Moves ===================================================*/
|
|
/*========================================================================*/
|
|
|
|
.charsheet .cartel .character_movespage .repcontrol {
|
|
column-span: all;
|
|
}
|
|
.charsheet .cartel .move {
|
|
min-width: 300px;
|
|
min-height: 50px;
|
|
border: 1px solid black; padding: 5px;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.charsheet .cartel .move header {
|
|
margin: 2px 5px 5px; padding: 0 5px 2px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
.charsheet .cartel .move main {
|
|
font-size: 16px; font-family: Garamond; padding: 5px 15px;
|
|
}
|
|
.charsheet .cartel .move main * { font-size: inherit; font-family: inherit; }
|
|
|
|
.charsheet .cartel .character_movespage .move button[type="roll"] ,
|
|
.charsheet .cartel .character_movespage .move .edit_roll_data { display: none; }
|
|
.charsheet .cartel .character_movespage .move input.show_button:checked + button[type="roll"] { display: inline-block; }
|
|
.charsheet .cartel .character_movespage .move input.hidden_control:checked + .edit_roll_data { display: block; }
|
|
|
|
.charsheet .cartel .move_description { white-space: pre-wrap; }
|
|
|
|
/*========================================================================*/
|
|
/* create an edit popup box for moves */
|
|
.charsheet .cartel .move.editbox details[open] {
|
|
position: relative;
|
|
height: 400px; padding: 15px;
|
|
background-color: #dfecec;
|
|
border: 2px solid black;
|
|
overflow: auto;
|
|
}
|
|
|
|
.move textarea {
|
|
width: calc(100% - 15px);
|
|
height: 50px;
|
|
}
|
|
|
|
/*================================================================================================*/
|
|
/*== BASIC MOVES ===============================================================================*/
|
|
/*================================================================================================*/
|
|
|
|
.basic_movespage .move { margin-bottom: 10px; }
|
|
|
|
/*================================================================================================*/
|
|
/*== EXTRAS ====================================================================================*/
|
|
/*================================================================================================*/
|
|
|
|
.extraspage > header, .extraspage > main { display: none; }
|
|
|
|
.extraspage > main section {
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* show and hide elements based on the playbook_filter */
|
|
.extraspage input.attr_playbook_filter[value="el cocinero"] ~ .cocinero,
|
|
.extraspage input.attr_playbook_filter[value="la esposa"] ~ .esposa,
|
|
.extraspage input.attr_playbook_filter[value="el halcon"] ~ .halcon,
|
|
.extraspage input.attr_playbook_filter[value="el narco"] ~ .narco,
|
|
.extraspage input.attr_playbook_filter[value="la polizeta"] ~ .polizeta,
|
|
.extraspage input.attr_playbook_filter[value="la rata"] ~ .rata,
|
|
.extraspage input.attr_playbook_filter[value="la sicaria"] ~ .sicaria
|
|
{ display: block; }
|
|
|
|
|
|
/*== COCINERO ==================================================================================*/
|
|
.laboratorio ul.checklist span { font-style: italic; }
|
|
|
|
/*== ESPOSA ====================================================================================*/
|
|
|
|
/*== HALCON ====================================================================================*/
|
|
.tu_pandilla .move { display: none; }
|
|
.tu_pandilla input:checked ~ .move {
|
|
display: block;
|
|
margin: 10px; margin-left: 30px;
|
|
}
|
|
.tu_pandilla .move header h3 span { color: var(--border-color); opacity: 1; }
|
|
.charsheet .cartel .tu_pandilla .move header { border-bottom: none; }
|
|
|
|
/*== POLIZETA ==================================================================================*/
|
|
.response { border-bottom: 1px solid Gray; padding: 2px 10px; font-size: 125%; }
|
|
|
|
/*================================================================================================*/
|
|
/*== STRESS/HEAT MOVES =========================================================================*/
|
|
/*================================================================================================*/
|
|
|
|
.cartel .stress_heatpage .move { margin-bottom: 10px; }
|
|
.cartel section.heat_moves { column-count: 2; }
|
|
|
|
.cartel .drug_moves details summary { cursor: pointer; }
|
|
.cartel .drug_moves details summary h3:before { font-family: "Pictos Three"; content: "l "; font-weight: normal; color: var(--border-color); }
|
|
.cartel .drug_moves details summary h3:after { font-family: Pictos; content: " &"; font-weight: normal; }
|
|
.cartel .drug_moves details[open] summary h3:after { content: " _"; }
|
|
|
|
|
|
/*================================================================================================*/
|
|
/*== NOTES =====================================================================================*/
|
|
/*================================================================================================*/
|
|
|
|
.notes .note_text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/*================================================================================================*/
|
|
/*== ROLL TEMPLATE ===============================================================================*/
|
|
/*================================================================================================*/
|
|
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox {
|
|
/* variables for use throughout the rollbox */
|
|
--title-color: Teal;
|
|
--title-color-tint: LightSteelBlue;
|
|
--border-color: FireBrick;
|
|
--border-color-tint: #cfafaf;
|
|
--background-color: Snow;
|
|
|
|
border: 3px double var(--border-color);
|
|
background-color: var(--background-color);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/* header */
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-header {
|
|
padding: 5px;
|
|
background-color: var(--border-color-tint);
|
|
border-bottom: 6px double var(--title-color);
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
font-family: Candal;
|
|
font-style: italic;
|
|
}
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-rolling {
|
|
font-weight: normal; text-align: left;
|
|
padding: 0; margin: 0;
|
|
font-family: Garamond;
|
|
}
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-header h2 { color: White; text-shadow: 0 0 3px Black, 0 0 3px Black; }
|
|
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-trigger {
|
|
display: inline-block; padding: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/*========================================================================*/
|
|
/* results */
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-result {
|
|
display: block; text-align: center;
|
|
padding-top: 20px;
|
|
}
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .inlinerollresult {
|
|
background-color: Linen; color: Teal;
|
|
border: 2px dotted Gray; border-radius: 15px;
|
|
font-size: 48px; font-family: Candal;
|
|
padding: 0 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-cartel .sheet-cartel-rollbox .sheet-resulttxt {
|
|
background-color: #eee;
|
|
border: 1px dotted #666;
|
|
margin: 10px; padding: 10px;
|
|
margin-top: 20px;
|
|
font-size: 16px; font-family: Garamond;
|
|
}
|