Skip to content

Instantly share code, notes, and snippets.

@AlcaDesign
Last active April 29, 2018 01:37
Show Gist options
  • Save AlcaDesign/29d62eceece04ef9a3e3f03c6f73d658 to your computer and use it in GitHub Desktop.
Save AlcaDesign/29d62eceece04ef9a3e3f03c6f73d658 to your computer and use it in GitHub Desktop.
Alca's custom CSS for modch.at (https://modch.at) | Sections are separated into files and "modch.at-custom.css" is all of them together.
.chat-lines {
font-size: 14px;
}
body.theme-dark .emote-menu {
padding: 0;
background-color: hsla(0, 0%, 25%, 0.95);
height: 60%;
width: auto;
left: 10px;
right: 10px;
bottom: calc(4em + 10px);
}
.emote-search {
position: relative;
top: 18px;
}
.emote-menu-list {
background-color: hsla(0, 0%, 16%, 0.6);
padding: 4px;
}
.emote-menu-list > div {
min-width: 28px;
max-width: 56px;
padding: 2px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.lm_splitter {
z-index: 61 !important;
}
.chat-lines {
font-size: 14px;
}
.lm_splitter {
z-index: 61 !important;
}
body.theme-dark .emote-menu {
padding: 0;
background-color: hsla(0, 0%, 25%, 0.95);
height: 60%;
width: auto;
left: 10px;
right: 10px;
bottom: calc(4em + 10px);
}
.emote-search {
position: relative;
top: 18px;
}
.emote-menu-list {
background-color: hsla(0, 0%, 16%, 0.6);
padding: 4px;
}
.emote-menu-list > div {
min-width: 28px;
max-width: 56px;
padding: 2px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.chat-paused-indicator {
animation: 300ms chat-paused-indicator-show;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
right: 0px;
left: 0px;
width: auto !important;
padding-left: 6px !important;
}
.chat-paused-indicator:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
-62.5deg,
hsla(0, 0%, 50%, 0.0) 45%,
hsla(0, 0%, 50%, 0.25) 50%,
hsla(0, 0%, 50%, 0.0) 55%
);
background-size: 300%;
animation: 2s grade-swipe infinite linear;
}
.chat-paused-indicator.ng-hide {
display: block !important;
animation: 300ms chat-paused-indicator-hide;
bottom: -25px;
}
.chat-line-mod-button-label {
display: inline-block;
width: 16px;
}
@keyframes chat-paused-indicator-show {
from {
bottom: -25px;
}
to {
bottom: 0px;
}
}
@keyframes chat-paused-indicator-hide {
from {
opacity: 1;
bottom: 0px;
}
50% {
opacity: 0;
}
to {
bottom: -25px;
}
}
@keyframes grade-swipe {
from {
background-position: 100%;
}
to {
background-position: 0%;
}
}
.chat-paused-indicator {
animation: 300ms chat-paused-indicator-show;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
right: 0px;
left: 0px;
width: auto !important;
padding-left: 6px !important;
}
.chat-paused-indicator:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
-62.5deg,
hsla(0, 0%, 50%, 0.0) 45%,
hsla(0, 0%, 50%, 0.25) 50%,
hsla(0, 0%, 50%, 0.0) 55%
);
background-size: 300%;
animation: 2s grade-swipe infinite linear;
}
.chat-paused-indicator.ng-hide {
display: block !important;
animation: 300ms chat-paused-indicator-hide;
bottom: -25px;
}
.chat-line-mod-button-label {
display: inline-block;
width: 16px;
}
@keyframes chat-paused-indicator-show {
from {
bottom: -25px;
}
to {
bottom: 0px;
}
}
@keyframes chat-paused-indicator-hide {
from {
opacity: 1;
bottom: 0px;
}
50% {
opacity: 0;
}
to {
bottom: -25px;
}
}
@keyframes grade-swipe {
from {
background-position: 100%;
}
to {
background-position: 0%;
}
}
@AlcaDesign
Copy link
Author

// Reserved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment