Personnage
elements */ color: #faead8; /* Change the color of the text inside the
elements */
}
.character-info strong {
font-size: 20px; /* Adjust the font size of the text */
font-weight: bold; /* Ensure the text is bold */
color: #f5ddc1; /* Change the color of the text */
}
.inventory, .inventory-checkboxes {
flex: 1;
margin: 10px;
}
.abilities, .abilityCheckboxes {
flex: 1;
margin: 10px;
}
.item-controls {
display: flex;
align-items: center;
gap: 10px; /* Space between buttons and checkboxes */
}
.inventory-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ffe2e2;
border-radius: 4px;
background-color: #3803542e;
}
.inventory-item label {
display: flex;
align-items: center;
gap: 5px;
}
.inventory-item span {
flex: 1;
}
.inventory-item button {
margin-left: 10px;
}
.state-checkbox {
margin-left: 10px;
}
.inventory-checkboxes div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px; /* Match the margin-bottom of .inventory-item */
padding: 10px; /* Match the padding of .inventory-item */
border: 1px solid #ddd; /* Match the border of .inventory-item */
border-radius: 4px; /* Match the border-radius of .inventory-item */
background-color: #3803542e; /* Match the background color of .inventory-item */
}
.inventory-checkboxes input[type="checkbox"] {
margin-right: 5px; /* Add space between the checkbox and text */
}
.abilityCheckboxes div {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px; /* Match the margin-bottom of .inventory-item */
padding: 10px; /* Match the padding of .inventory-item */
border: 1px solid #ddd; /* Match the border of .inventory-item */
border-radius: 4px; /* Match the border-radius of .inventory-item */
background-color: #3803542e; /* Match the background color of .inventory-item */
}
.abilityCheckboxes input[type="checkbox"] {
margin-right: 5px; /* Add space between the checkbox and text */
}
.learned-abilities, .unlearned-abilities {
flex: 1;
min-width: 250px;
}
.unlearned-controls {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card h3 {
font-size: 16px;
margin-bottom: 10px;
color: rgb(255, 238, 201);
}
.grid-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* Checkbox Grouping */
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
}
.grid-modifiers {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}
/* Buttons */
button {
z-index: 10; /* Ensure it's on top of other elements */
background: linear-gradient(90deg, #8b5e3b, #c4a484);
color: #2d1b0d;
font-weight: bold;
padding: 8px 12px;
border-radius: 6px;
transition: transform 0.2s ease-in-out, background 0.3s;
}
button:hover {
background: linear-gradient(90deg, #c4a484, #8b5e3b);
transform: scale(1.05);
}
/* Modal Background */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
/* Modal Content */
.modal-content {
background: rgba(38, 13, 36, 0.788);
border: 1px solid #ddd; /* Match the border of .inventory-item */
padding: 20px;
border-radius: 10px;
text-align: center;
max-width: 400px;
color: rgb(255, 229, 217);
font-family: 'Cinzel', serif;
position: relative;
}
/* Close Button (Top Right) */
.close-button {
position: absolute;
right: 15px;
top: 10px;
font-size: 24px;
cursor: pointer;
}
/* Close Button (Bottom) */
.close-modal {
background: #7c4a25;
color: white;
border: none;
padding: 8px 12px;
margin-top: 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.close-modal:hover {
background: #cdae90;
}
.zoom-controls button {
margin: 5px;
font-size: 16px;
}
#imageContainer {
overflow: hidden;
display: inline-block;
cursor: grab;
}
#popupImage {
max-width: 100%;
max-height: 70vh;
transition: transform 0.2s ease;
}
/* JOURNAL */
.close {
position: absolute;
right: 15px;
top: 10px;
font-size: 20px;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
border: 1px solid #4d3828;
border-radius: 5px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
.note-item {
background: #ffffff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
}
/* Journal Entry Styling */
#savedNotesContent {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 60vh;
overflow-y: auto;
}
/* Editable Note Area */
#editableNoteText {
width: 100%;
height: 200px;
resize: vertical;
padding: 10px;
font-size: 14px;
}
/* Note Action Buttons */
.note-buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.note-buttons button {
padding: 8px 15px;
border: none;
background-color: #007bff;
color: rgb(21, 4, 4);
cursor: pointer;
border-radius: 5px;
}
.note-buttons button:hover {
background-color: #000000;
}
Name: Class: Species: Social Rank Total:
|TEST DIFFICULTY|
Load Your Character
Character Profile
Image Viewer
Characteristics & Abilities
Health & Combat Stats
Willpower and constitution check (difficulty 30) Penalty fatigue
Inventory & States
Total Weight: 0
Total Volume: 0
Abilities
Unlearned abilities
Combat & Actions
Modifiers & Conditions
Attack Bonus (item)
Defense Bonus (item)
Dice Rolling
Results