Template:Character Relationship Box/styles.css: Difference between revisions
Template page
More actions
Content deleted Content added
LordSkorne7 (talk | contribs) No edit summary |
LordSkorne7 (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
/* Character Relationship Box Style */ |
|||
.character-relationship-box { |
.character-relationship-box { |
||
display: block; |
|||
| ⚫ | |||
align-items: center; |
|||
| ⚫ | |||
background-color: var(--background-color, #2b2b2b); |
|||
background: linear-gradient(180deg, #2e0e19 0%, #1c070f 100%); |
|||
| ⚫ | |||
padding: 15px; |
|||
max-width: 750px; |
|||
width: 100%; |
|||
| ⚫ | |||
color: var(--text-color, #e0e0e0); |
|||
color: #e2d1e5; |
|||
| ⚫ | |||
position: relative; |
|||
box-sizing: border-box; |
|||
box-shadow: 0 0 12px #137dc4; |
|||
overflow: hidden; |
|||
} |
} |
||
.character-relationship- |
.character-relationship-box-image { |
||
position: absolute; |
|||
top: 15px; |
|||
right: 15px; |
|||
width: 90px; |
|||
| ⚫ | |||
} |
} |
||
.character-relationship- |
.character-relationship-box-hearts { |
||
display: block; |
|||
font-size: 130%; |
|||
font-weight: bold; |
|||
color: #a38bd3; |
|||
| ⚫ | |||
margin-right: 100px; |
|||
} |
} |
||
.character-relationship- |
.character-relationship-box-section { |
||
display: block; |
|||
font-weight: bold; |
|||
color: #c7b5e5; |
|||
| ⚫ | |||
margin-top: 5px; |
|||
} |
} |
||
/* ========================== |
|||
.character-relationship-description { |
|||
Optional Small Version (if needed in future) |
|||
| ⚫ | |||
========================== */ |
|||
| ⚫ | |||
line-height: 1.5em; |
|||
} |
|||
.character-relationship- |
.character-relationship-box-small { |
||
max-width: 500px; |
|||
| ⚫ | |||
} |
} |
||
.character-relationship- |
.character-relationship-box-small .character-relationship-box-hearts { |
||
font-size: 110%; |
|||
| ⚫ | |||
} |
} |
||
Revision as of 21:11, May 1, 2025
.character-relationship-box {
display: block;
border: 2px solid #137dc4;
border-radius: 15px;
background: linear-gradient(180deg, #2e0e19 0%, #1c070f 100%);
padding: 15px;
max-width: 750px;
width: 100%;
font-family: Varela Round, sans-serif;
color: #e2d1e5;
position: relative;
box-sizing: border-box;
box-shadow: 0 0 12px #137dc4;
overflow: hidden;
}
.character-relationship-box-image {
position: absolute;
top: 15px;
right: 15px;
width: 90px;
height: auto;
}
.character-relationship-box-hearts {
display: block;
font-size: 130%;
font-weight: bold;
color: #a38bd3;
margin-top: 0;
margin-right: 100px;
}
.character-relationship-box-section {
display: block;
font-weight: bold;
color: #c7b5e5;
margin-top: 5px;
}
/* ==========================
Optional Small Version (if needed in future)
========================== */
.character-relationship-box-small {
max-width: 500px;
font-size: 90%;
}
.character-relationship-box-small .character-relationship-box-hearts {
font-size: 110%;
}