tabletop-companion/app/assets/stylesheets/characters.css

138 lines
2.5 KiB
CSS

.character {
background-color: var(--inset-bg-color);
border-radius: var(--border-radius);
padding: 1em;
h5 {
font-size: 1.1em;
margin: 0;
}
h5 a:link, h5 a:visited {
color: inherit;
text-decoration: none;
}
> ul {
padding: 0;
li {
list-style-type: none;
display: inline;
color: var(--secondary-text-color);
font-size: .8em;
&:after {
content: " • ";
}
&:last-child:after {
content: "";
}
}
}
}
.character-sheet-section.top-level {
background-color: var(--inset-bg-color);
}
.character-sheet-section {
border: 1px solid var(--background-color);
border-radius: var(--border-radius);
margin-top: .3em;
h4 {
background-color: var(--background-color);
color: var(--header-text-color);
margin: 0;
padding: .5em;
}
.content {
padding: 1em;
}
}
.stats {
display: flex;
flex-wrap: wrap;
gap: .2em;
justify-content: center;
}
.stat, .text-field {
display: flex;
flex-direction: column;
border-radius: var(--border-radius);
h6, .feature-edit-buttons {
font-size: .8em;
text-align: center;
background-color: var(--background-color);
color: var(--header-text-color);
margin: 0;
padding: .5em;
}
input, .stat-value {
font-size: 3em;
width: 2.5em;
}
input, .stat-value, .trix-content {
padding: .5em;
color: var(--text-color);
background-color: var(--input-background);
text-align: center;
border: 1px solid var(--background-color);
height: 120px;
}
trix-toolbar {
display: none;
}
.trix-content {
min-width: 10em;
max-width: 20em;
overflow-y: scroll;
font-size: .8em;
align-content: center;
}
input[type=submit] {
width: 100%;
font-size: .8em;
height: auto;
padding: auto;
}
a:link, a:visited {
text-decoration: none;
}
}
.feature-edit-buttons {
a:link, a:visited {
color: inherit;
text-decoration: none;
}
}
.stat-value {
box-shadow: inset 10px 10px 15px var(--light-shadow-color), inset -10px -10px 15px var(--light-shadow-color);
position: relative;
}
.stat-min-value:empty, .stat-max-value:empty {
display: none;
}
.stat-min-value, .stat-max-value {
font-size: .3em;
background-color: var(--background-color);
color: var(--header-text-color);
position: absolute;
bottom: 0;
padding: .5em;
}
.stat-min-value {
left: 0;
border-radius: 0 1em 0 0;
}
.stat-max-value {
right: 0;
border-radius: 1em 0 0 0;
}