Last active
February 14, 2023 02:55
-
-
Save Fire-/9f862fd55f624481bfebc3dfde638971 to your computer and use it in GitHub Desktop.
KapChat changes - dynamic scaling with font size, inverted message order, custom font
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* main, full replace, dynamic kapchat. This will override all CSS in the default clear theme */ | |
html { | |
font-size: 24px; | |
/* everything scales with this font-size; default is 16px. | |
* Usage of `em` in font-size refers to the parent's font-size as 1em. | |
* Usage of `rem` refers to the root em value ( this ) instead. | |
* Use `rem` when possible. | |
*/ | |
width: 100%; | |
height: 100%; | |
} | |
body { | |
overflow: hidden; | |
margin: 0.313rem; | |
} | |
#chat_box { | |
background-color: transparent; | |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
font-size: 0.813rem; /* this changes all child element em bases to 0.813 of the root and is why we use `rem` everywhere else */ | |
font-style: normal; | |
font-variant: normal; | |
font-weight: normal; | |
position: absolute; | |
overflow: hidden; | |
color: #D3D3D3; | |
border-radius: 0.250rem; | |
width: calc(100% - 0.625rem); | |
} | |
#chat_box.dark { | |
background: rgba(0, 0, 0, 0.3); | |
color: #fff; | |
} | |
#chat_box.light { | |
background: rgba(255, 255, 255, 0.3); | |
color: #000; | |
} | |
.nick { | |
font-weight: bold; | |
} | |
.tag { | |
display: inline-block; | |
text-indent: 1.313rem; | |
background-position: 0 center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
display: inline-block; | |
vertical-align: bottom; | |
height: 1.125rem; | |
min-width: 1.125rem; | |
padding: 0; | |
margin-right: 0.188rem; | |
margin-bottom: -0.063rem; | |
text-indent: -624.938rem; | |
border-radius: 0.125rem; | |
-moz-border-radius: 0.125rem; | |
-webkit-border-radius: 0.125rem; | |
overflow: hidden; | |
vertical-align: sub; /* aligns with the middle of text */ | |
} | |
.chat_line { | |
margin-left: 0.188rem; | |
margin-right: 0.188rem; | |
padding-top: 0.125rem; | |
padding-bottom: 0.188rem; | |
line-height: 1.250rem; /* avoid clipping */ | |
} | |
.chat_line .message { | |
word-wrap: break-word; | |
} | |
.chat_line .time_stamp { | |
display: none; | |
padding-right: 0.188rem; | |
} | |
.emoticon { | |
margin-bottom: -0.438rem; | |
min-width:1.750rem; /* min dimensions enforced to some scale of 18x18 */ | |
min-height:1.750rem; | |
vertical-align: sub; /* aligns with the middle of text */ | |
} | |
.cheermote { | |
width: auto; | |
max-height: 1.750rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.chat_line { | |
/* set whatever font you want to use here. */ | |
font-family: "Keep Calm" !important; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* inverted message order, new messages on top. */ | |
#chat_box { | |
transform: rotate(180deg); /* rotate the container upside down, putting new messages on top */ | |
} | |
.chat_line { | |
transform: rotate(-180deg); /* rotate the lines back the other direction so they're right-side up */ | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.chat_line { | |
text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0 #000, 1px 1px 0 #000; | |
letter-spacing: 0.060rem; /* letter spacing in an attempt to combat crowding created by text-shadow */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Scaled to 24px with a dark background added:
Inverted order, with text-shadow for "stroke"