html {
background: rgba(239, 235, 208, 0.5);
}
body, .container {
background: none;
}
h3 {
font-size: 1.5rem;
padding-top: 2px;
}
.search_monster {
display: inline-block;
height: 100%;
}
.search_monster_input {
background: none;
color: #eee;
font-size: 150%;
border: none;
border-bottom: 3px solid #eee;
padding: 5px 0;
}
.relationship_filter {
margin-left: 20px;
}
.relationship_filter_label {
margin-left: 5px;
font-size: 150%;
}
.container {
max-width: 100%;
}
.monster {
padding: 30px;
margin-bottom: 30px;
background-image: url('../img/bg_red.jpg');
background-position: center center;
transition: box-shadow .2s;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
position: relative;
text-align: center;
min-height: 1000px;
}
.monster.allied {
background-image: url('../img/bg_green.jpg');
}
.monster:hover {
box-shadow: 0px 1px 5px #888888;
}
.monster_content {
background-image: url('../img/bg_white.jpg');
background-position: center center;
background-size: cover;
padding: 30px 0;
border: 3px solid #222;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
width: 100%;
margin: 0 auto;
height: calc(1000px - 60px);
}
.side {
}
.side > div {
margin-bottom: 20px;
}
.undefined {
display: none !important;
}
/* Left side */
.left_side {
position: relative;
border-right: 1px solid #222;
}
.name h2 {
font-size: 250%;
}
.picture {
width: 200px;
height: 200px;
margin: 50px auto !important;
border: 3px solid #222;
background-color: rgba(255,255,255,0.5);
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
}
.picture img {
max-width: 100%;
max-height: 100%;
}
.description {
display: grid;
grid-template-columns: 33% 33% 33%;
border-top: 3px solid #222;
border-bottom: 3px solid #222;
padding: 10px 0;
}
.description > div::before {
display: block;
width: 20px;
height: 20px;
content: " ";
background-size: cover;
margin: 0 auto;
}
.type::before { background-image: url('../img/icons/type.png'); }
.size::before { background-image: url('../img/icons/size.png'); }
.alignment::before { background-image: url('../img/icons/alignment.png'); }
.alignment > div {
display: block;
}
.goodness {
}
.lagality {
}
.details {
display: grid;
grid-template-columns: 33% 33% 33%;
padding: 10px 0;
}
.details > div {
border: 3px solid #222;
margin: 0 10px;
vertical-align: middle;
display: table;
position: relative;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
background-color: rgba(255,255,255,0.5);
}
.details > div span {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 150%;
}
.details > div::before {
display: block;
position: absolute;
top: 5px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
font-weight: bold;
}
.armor_class::before { content: "CA"; }
.hit_points::before { content: "PF"; }
.speed::before { content: "MOV"; }
.stats {
display: grid;
grid-template-columns: 16.67% 16.67% 16.67% 16.67% 16.67% 16.67%;
border-top: 3px solid #222;
border-bottom: 3px solid #222;
padding: 10px 0;
}
.stats > div span {
display: block;
}
.stats .stat_name {
font-size: 150%;
margin: 10px 0;
}
.stats > div::before {
display: block;
font-weight: bold;
}
.str::before { content: "STR"; }
.dex::before { content: "DEX"; }
.cos::before { content: "COS"; }
.int::before { content: "INT"; }
.wis::before { content: "WIS"; }
.cha::before { content: "CHA"; }
.behavior {
text-align: left;
}
/* Right side */
.right_side {
text-align: left;
border-left: 2px solid #222;
}
.right_side h3 {
text-align: center;
background-color: rgba(255,255,255,0.5);
}
.features {
}
.features > div {
display: flex;
margin-bottom: 2px;
}
.features > div:before {
font-weight: bold;
text-align: left;
margin-right: 10px;
width: 33%;
text-align: right;
height: 100%;
}
.features > div span {
width: 66%;
}
.features item:not(:last-child)::after {
content: ",";
display: inline-block;
margin-right: 5px;
}
.features .skills::before { content: "Abilità"; }
.features .senses::before { content: "Sensi"; }
.features .saving_throws::before { content: "Tiri salvezza"; }
.features .damage_vulnerabilities::before { content: "Vulnerabilità"; }
.features .damage_resistances::before { content: "Resistenza"; }
.features .damage_immunities::before { content: "Immunità"; }
.features .condition_immunities::before { content: "Altre immunità"; }
.features .languages::before { content: "Linguaggi"; }
.features .challange::before { content: "Sfida"; }
.traits {
}
.trait, .action, .reaction {
margin-bottom: 5px;
}
.trait > div, .action > div, .reaction > div {
display: inline;
padding: 5px 0;
}
.trait_name, .action_name, .reaction_name {
font-weight: bold;
margin-right: 5px;
}
.trait_description {
}
.actions {
}
.action {
display: grid;
grid-template-columns: 40% 60%;
}
.action:not(:last-child) {
margin-bottom: 15px;
}
.action_name {
}
.action_stats {
font-weight: bold;
}
.action_stats > div {
display: inline-block;
margin-right: 10px;
}
.action_stats > div::before {
display: inline-block;
width: 20px;
height: 20px;
content: " ";
background-size: cover;
margin-right: 2px;
vertical-align: -30%;
}
.range::before {
background-image: url("../img/icons/range.png");
}
.targets::before {
background-image: url("../img/icons/targets.png");
}
.to_hit::before {
background-image: url("../img/icons/hit.png");
}
.action_description {
grid-column-start: 1;
grid-column-end: 2;
}
.damages {
grid-column-start: 2;
grid-column-end: end;
}
.damage {
}
.damage::before {
display: inline-block;
width: 20px;
height: 20px;
content: " ";
background-size: cover;
margin-right: 2px;
vertical-align: -30%;
background-image: url("../img/icons/damage3.png");
}
.damage > div {
display: inline;
}
.damage_name {
font-weight: bold;
margin-right: 5px;
}
.damage_decription {
}
.spells {
}
.spell {
display: flex;
margin-bottom: 2px;
}
.spell_level {
width: 30%;
text-align: right;
margin-right: 10px;
}
.spell_list {
width: 70%;
}
.spell_list item:not(:last-child)::after {
content: ",";
display: inline-block;
margin-right: 5px;
}
.dice {
background-color: rgba(255,255,255,0.5);
padding: 2px 5px;
transition: box-shadow .1s;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
cursor: pointer;
position: relative;
display: inline;
}
.dice:hover {
box-shadow: 0px 1px 5px #888888;
}
.dice_result {
position: absolute;
top: -105px;
left: -72px;
width: 200px;
height: 86px;
}
.dice_result .bubble {
position: relative;
background: #222;
/* border-radius: 10px; */
display: block;
height: 100%;
padding: 20px;
text-align: center;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .7);
width: auto;
}
.dice_result .bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 13px solid transparent;
border-top-color: #222;
border-bottom: 0;
margin-left: -13px;
margin-bottom: -13px;
}
.bubble .result, .bubble .rolls, .bubble .roll, .bubble .bonus {
color: #eee;
}
.bubble .result {
font-size: 200%;
}
.bubble .rolls {
display: block;
}