Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- html, body {
- width: 100%;
- height: 100%;
- margin-bottom: 10px;
- overflow: hidden;
- font-family: 'Press Start 2P';
- }
- #custom_html{
- width:315px;
- height:450px;
- }
- #log {
- font: {font_size} 'Press Start 2P';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- color: {text_color};
- }
- #log > div {
- -webkit-animation: fadeOut 1s ease {message_hide_delay} forwards;
- animation: fadeOut 1s ease {message_hide_delay} forwards;
- word-wrap: break-word;
- }
- #log > div.deleted {
- visibility: hidden;
- }
- #log .emote {
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- position: relative;
- }
- #log .emote > img {
- display: inline-block;
- height: 1em;
- opacity: 0;
- }
- #alert-symbol {
- width: 56px;
- height: 72px;
- line-height: 72px;
- text-align: center;
- background: #57e5c0 url("https://uploads.twitchalerts.com/000/090/839/493/chat-icon.png") center center no-repeat;
- clip-path: polygon(0px 22px, 28px 0px, 56px 22px, 52px 36px, 56px 50px, 28px 72px, 0px 50px, 4px 36px, 0px 22px);
- margin: 0 auto;
- position: relative;
- top: 0;
- left: 0;
- color: #155041;
- vertical-align: middle;
- font-size: 40px;
- font-weight: bold;
- animation: AlertIcon 4s cubic-bezier(.5,.29,0,1.43);
- z-index: 999999;
- }
- #chat-decoration {
- border-top: 9px solid #483483;
- margin: 0 auto;
- z-index: 1;
- box-shadow: 1px 18px 12px 2px rgba(21,68,138,.4);
- }
- #chat-decoration:before {
- content: "#CYBERPSYPUNK.TXT";
- position: absolute;
- top: 6;
- margin-top:4px;
- padding-left:20px;
- margin-left: 8px;
- color: #f5ffb3;
- font-size:14px;
- background: url('https://i.imgur.com/CmSP4Ix.png') left center no-repeat;
- background-position-y:-1px;
- }
- #wrapper {
- background-color: rgba(42, 30, 76, 0.3);
- width:100%;
- height: 100%;
- overflow: hidden;
- position: relative;
- }
- #log {
- margin: 0;
- padding: 0 10px 10px 10px;
- overflow: hidden;
- }
- #log > div {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
- -webkit-animation: fadeInUp 500ms ease, fadeOutUp 1s ease {message_hide_delay} forwards;
- animation: fadeInUp 500ms ease, fadeOutUp 1s ease {message_hide_delay} forwards;
- }
- .name {
- margin-top: 10px;
- color: #deff00 !important;
- font-family: 'Press Start 2P';
- text-shadow: 1px 1px 0 #2a1e4c, -1px 1px 0 #2a1e4c, 1px -1px 0 #2a1e4c, -1px -1px 0 #2a1e4c, 0px 1px 0 #2a1e4c, 0px -1px 0 #2a1e4c, -1px 0px 0 #2a1e4c, 1px 0px 0 #2a1e4c, 2px 2px 0 #2a1e4c, -2px 2px 0 #2a1e4c, 2px -2px 0 #2a1e4c, -2px -2px 0 #2a1e4c, 0px 2px 0 #2a1e4c, 0px -2px 0 #2a1e4c, -2px 0px 0 #2a1e4c, 2px 0px 0 #2a1e4c, 1px 2px 0 #2a1e4c, -1px 2px 0 #2a1e4c, 1px -2px 0 #2a1e4c, -1px -2px 0 #2a1e4c, 2px 1px 0 #2a1e4c, -2px 1px 0 #2a1e4c, 2px -1px 0 #2a1e4c, -2px -1px 0 #2a1e4c; }
- .message {
- color: #b5adff;
- font-weight: regular;
- font-family: 'Press Start 2P';
- text-shadow: 1px 1px 0 #2a1e4c, -1px 1px 0 #2a1e4c, 1px -1px 0 #2a1e4c, -1px -1px 0 #2a1e4c, 0px 1px 0 #2a1e4c, 0px -1px 0 #2a1e4c, -1px 0px 0 #2a1e4c, 1px 0px 0 #2a1e4c, 2px 2px 0 #2a1e4c, -2px 2px 0 #2a1e4c, 2px -2px 0 #2a1e4c, -2px -2px 0 #2a1e4c, 0px 2px 0 #2a1e4c, 0px -2px 0 #2a1e4c, -2px 0px 0 #2a1e4c, 2px 0px 0 #2a1e4c, 1px 2px 0 #2a1e4c, -1px 2px 0 #2a1e4c, 1px -2px 0 #2a1e4c, -1px -2px 0 #2a1e4c, 2px 1px 0 #2a1e4c, -2px 1px 0 #2a1e4c, 2px -1px 0 #2a1e4c, -2px -1px 0 #2a1e4c; }
- }
- .meta {
- display: block;
- font-weight: bold;
- width: 100%;
- text-align: left;
- padding-right: 8px;
- font-weight: bold;
- margin-top: 10px;
- }
- .message {
- display: block;
- }
- .badges {
- float: right;
- margin-left: 5px;
- margin-top: 10px;
- }
- .badge {
- margin-left: 5px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement