mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
196 lines
3.0 KiB
CSS
196 lines
3.0 KiB
CSS
/* Original Dungeons & Dragons Character Sheet CSS */
|
|
/* Version 1.5.1 */
|
|
|
|
|
|
/****************
|
|
*** FONTS ***
|
|
****************/
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');
|
|
|
|
/* end Fonts */
|
|
|
|
|
|
/**************
|
|
** Wrapper **
|
|
**************/
|
|
|
|
.charsheet {
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-odd {
|
|
max-width: 800px;
|
|
min-width: 700px;
|
|
margin: 0;
|
|
padding: 10px 20px 20px;
|
|
background: #FAFCFC;
|
|
}
|
|
|
|
|
|
/*****************
|
|
** Typography **
|
|
*****************/
|
|
|
|
h2, span, label, .sheet-label, .sheet-text {
|
|
margin: 0px;
|
|
font-family: 'Special Elite';
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
color: #7A9EAA;
|
|
}
|
|
|
|
h2, .sheet-label, .sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-label, .sheet-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/******************
|
|
*** LAYAOUT ***
|
|
******************/
|
|
|
|
/* FLEXBOX */
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
}
|
|
|
|
.sheet-label {
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-flex-row.sheet-misc {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* GRID 16 — top and middle */
|
|
|
|
.sheet-grid-16 {
|
|
display: grid;
|
|
grid-template-columns: repeat(16, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-gap: 16px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.sheet-grid-16-span-1 {
|
|
grid-column: span 1;
|
|
}
|
|
.sheet-grid-16-span-4 {
|
|
grid-column: span 4;
|
|
}
|
|
.sheet-grid-16-span-6 {
|
|
grid-column: span 6;
|
|
}
|
|
.sheet-grid-16-span-8 {
|
|
grid-column: span 8;
|
|
}
|
|
.sheet-grid-16-span-16 {
|
|
grid-column: span 16;
|
|
}
|
|
|
|
/* GRID 3 bottom */
|
|
|
|
.sheet-grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: 200px auto 51px;
|
|
grid-gap: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.sheet-grid-3-item {
|
|
padding: 0 8px 8px 0;
|
|
}
|
|
|
|
.sheet-grid-3-item1 {
|
|
grid-row: span 3;
|
|
border-right: 2px dashed #7A9EAA;
|
|
}
|
|
.sheet-grid-3-item2 {
|
|
border-right: 2px dashed #7A9EAA;
|
|
}
|
|
.sheet-grid-3-item5 {
|
|
grid-row: span 2;
|
|
border-top: 2px dashed #7A9EAA;
|
|
border-right: 2px dashed #7A9EAA;
|
|
}
|
|
.sheet-grid-3-item6, .sheet-grid-3-item9 {
|
|
border-top: 2px dashed #7A9EAA;
|
|
}
|
|
|
|
/* END Layout */
|
|
|
|
|
|
/************************
|
|
*** FORM ELEMENTS ***
|
|
************************/
|
|
|
|
.sheet-odd label {
|
|
margin: 0;
|
|
padding: 0 8px 0 0;
|
|
width: auto;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.sheet-odd input, .sheet-odd textarea {
|
|
border-radius: 0;
|
|
border: none;
|
|
margin: 0;
|
|
background: transparent;
|
|
font-family: 'Patrick Hand';
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
color: #333;
|
|
overflow: visible;
|
|
}
|
|
|
|
.sheet-odd input {
|
|
padding: 0 8px;
|
|
border-bottom: 2px solid #7A9EAA;
|
|
}
|
|
|
|
.sheet-odd textarea, input.sheet-fill, .sheet-fill {
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
::placeholder {
|
|
font-family: 'Special Elite';
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
input.sheet-attr {
|
|
text-align: center;
|
|
}
|
|
|
|
textarea.sheet-textarea-fill {
|
|
box-sizing:border-box;
|
|
width: 100%;
|
|
height: 85%
|
|
}
|
|
|
|
/* END Form Elements */
|
|
|
|
/* Misc. */
|
|
|
|
.sheet-lanuages-saves-misc {
|
|
border-top: 2px dashed #7A9EAA;
|
|
border-bottom: 2px dashed #7A9EAA;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.sheet-lanuages-saves-misc-group {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.sheet-coin label {
|
|
width: 55%;
|
|
}
|