Skip to content

Instantly share code, notes, and snippets.

@blockworks

blockworks/castcraft.html

Created September 5, 2022 05:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blockworks/c679b276cd4cf6281d0646975f9248d8 to your computer and use it in GitHub Desktop.
Save blockworks/c679b276cd4cf6281d0646975f9248d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
castcraft.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.chat-box {
display: table;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
table-layout: fixed;
box-sizing: border-box;
overflow: hidden;
color: {{color}};
{{#if outlineEnabled}}
text-shadow: {{textShadow}};
{{/if}}
font-family: {{{fontFamily}}}, sans-serif;
font-weight: {{fontWeight}};
font-size: {{fontSize}}px;
}
.chat-box-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 10px 0;
line-height: {{lineHeight}}px;
{{#if animationEnabled}}
animation: {{animation}};
{{/if}}
width: 100%;
background-color: {{itemBoxBackgroundColor}};
border-color: {{itemBoxBorderColor}};
border-width: {{itemBoxBorderWidth}}px;
border-radius: {{itemBoxBorderRadius}}px;
border-style: solid;
}
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 10px 10px 0 10px;
background-color: {{itemBoxHeaderBackgroundColor}};
border-top-left-radius: calc({{itemBoxBorderRadius}}px - {{itemBoxBorderWidth}}px);
border-top-right-radius: calc({{itemBoxBorderRadius}}px - {{itemBoxBorderWidth}}px);
}
.avatar-name {
margin: 0;
display: inline;
vertical-align: middle;
word-wrap: break-word;
{{#if nameFontOverride}}
color: {{nameColor}};
{{#if nameOutlineEnabled}}
text-shadow: {{nameTextShadow}};
{{/if}}
font-family: {{{nameFontFamily}}}, sans-serif;
font-weight: {{nameFontWeight}};
font-size: {{nameFontSize}}px;
{{/if}}
}
.message {
margin: 0;
display: inline;
}
.avatar-image-wrapper {
margin-right: 10px;
}
.content-body {
padding: 5px 10px 10px 10px;
line-height:1.3;
word-wrap: break-word;
background-color: {{itemBoxBodyBackgroundColor}};
border-bottom-left-radius: calc({{itemBoxBorderRadius}}px - {{itemBoxBorderWidth}}px);
border-bottom-right-radius: calc({{itemBoxBorderRadius}}px - {{itemBoxBorderWidth}}px);
}
</style>
</head>
<body>
<div class="chat-box-item">
<div class="header">
{{#if showAvatarImage}}
<div class="avatar-image-wrapper">{{{avatarIcon}}}</div>
{{/if}}
{{#if showAvatarName}}
<div class="avatar-name">{{name}}</div>
{{/if}}
</div>
<div class="content-body">
<div class="message">{{{message}}}</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment