mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2026-07-18 19:53:35 +01:00
VChat: Redone chat output in Vue.js
Co-authored-by: Leshana <Leshana@users.noreply.github.com>
This commit is contained in:
Arokha Sieyes
@@ -0,0 +1,86 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="semantic.css" />
|
||||
<link rel="stylesheet" type="text/css" href="vchat-font-embedded.css" />
|
||||
<link rel="stylesheet" type="text/css" href="ss13styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ui segment">
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message."</span><br>
|
||||
<span class='notice'>Testing notice message.</span><br>
|
||||
<span class='danger'>Testing danger message.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message."</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 2."</span><br>
|
||||
<span class='notice'>Testing notice message 2.</span><br>
|
||||
<span class='danger'>Testing danger message 2.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 2".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 2.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 2.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 2.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 3."</span><br>
|
||||
<span class='notice'>Testing notice message 3.</span><br>
|
||||
<span class='danger'>Testing danger message 3.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 3".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 3.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 3.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 3.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 4."</span><br>
|
||||
<span class='notice'>Testing notice message 4.</span><br>
|
||||
<span class='danger'>Testing danger message 4.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 4".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 4.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 4.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 4.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 5."</span><br>
|
||||
<span class='notice'>Testing notice message 5.</span><br>
|
||||
<span class='danger'>Testing danger message 5.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 5".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 5.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 5.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 5.</span><br>
|
||||
</div>
|
||||
<div class="ui segment inverted">
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message."</span><br>
|
||||
<span class='notice'>Testing notice message.</span><br>
|
||||
<span class='danger'>Testing danger message.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message."</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 2."</span><br>
|
||||
<span class='notice'>Testing notice message 2.</span><br>
|
||||
<span class='danger'>Testing danger message 2.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 2".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 2.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 2.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 2.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 3."</span><br>
|
||||
<span class='notice'>Testing notice message 3.</span><br>
|
||||
<span class='danger'>Testing danger message 3.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 3".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 3.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 3.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 3.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 4."</span><br>
|
||||
<span class='notice'>Testing notice message 4.</span><br>
|
||||
<span class='danger'>Testing danger message 4.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 4".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 4.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 4.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 4.</span><br>
|
||||
<span class='game say'><b>Test Person</b> says, "Testing say message 5."</span><br>
|
||||
<span class='notice'>Testing notice message 5.</span><br>
|
||||
<span class='danger'>Testing danger message 5.</span><br>
|
||||
<span class='secradio'>[Security] <b>Secu Person</b> says, "Testing radio message 5".</span><br>
|
||||
<span class='ooc'><span class='everyone'>Testing OOC message 5.</span></span><br>
|
||||
<span class='ooc'><span class='looc'>Testing LOOC message 5.</span></span><br>
|
||||
<span class='admin_channel'>Testing asay message 5.</span><br>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+404
File diff suppressed because one or more lines are too long
+110
File diff suppressed because one or more lines are too long
@@ -0,0 +1,227 @@
|
||||
/* VChat Styles */
|
||||
#contentbox {
|
||||
margin-top: 3rem; /* Make room for the fixed top menu */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word; /* IE, blah */
|
||||
}
|
||||
|
||||
.menu, .item {
|
||||
padding-top: 0.2em !important;
|
||||
padding-bottom: 0.2em !important;
|
||||
}
|
||||
|
||||
.ui.menu .item > .label:not(.floating) {
|
||||
margin-left: 0;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#app > .menu {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.inverted {
|
||||
background-color: #111111;
|
||||
}
|
||||
|
||||
.blinkwarn {
|
||||
color: #FF0000;
|
||||
animation: blink-animation 1s steps(5, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* The chat message display classes */
|
||||
#messagebox div { display: none; } /* Hide messages by default */
|
||||
#messagebox.vc_showall div { display: block; } /* Unless we have vc_showall */
|
||||
|
||||
#messagebox.vc_localchat .vc_localchat { display: block; }
|
||||
#messagebox.vc_radio .vc_radio { display: block; }
|
||||
#messagebox.vc_warnings .vc_warnings { display: block; }
|
||||
#messagebox.vc_info .vc_info { display: block; }
|
||||
#messagebox.vc_deadchat .vc_deadchat { display: block; }
|
||||
#messagebox.vc_globalooc .vc_globalooc { display: block; }
|
||||
#messagebox.vc_adminpm .vc_adminpm { display: block; }
|
||||
#messagebox.vc_adminchat .vc_adminchat { display: block; }
|
||||
#messagebox.vc_modchat .vc_modchat { display: block; }
|
||||
#messagebox.vc_eventchat .vc_eventchat { display: block; }
|
||||
#messagebox.vc_system .vc_system { display: block; }
|
||||
|
||||
|
||||
/* SS13 Styles */
|
||||
#messagebox {font-family: Verdana, sans-serif;}
|
||||
|
||||
#messagebox h1, #messagebox h2, #messagebox h3, #messagebox h4, #messagebox h5, #messagebox h6 {color: #0000ff; font-family: Georgia, Verdana, sans-serif;}
|
||||
|
||||
#messagebox em {font-style: normal; font-weight: bold;}
|
||||
|
||||
.motd {color: #638500;font-family: Verdana, sans-serif;}
|
||||
.motd h1, .motd h2, .motd h3, .motd h4, .motd h5, .motd h6
|
||||
{color: #638500;text-decoration: underline;}
|
||||
.motd a, .motd a:link, .motd a:visited, .motd a:active, .motd a:hover
|
||||
{color: #638500;}
|
||||
|
||||
.prefix {font-weight: bold;}
|
||||
.log_message {color: #386AFF; font-weight: bold;}
|
||||
/*.inverted .message {color: #386AFF; font-weight: bold;}*/
|
||||
|
||||
/* OOC */
|
||||
.ooc {font-weight: bold;}
|
||||
.ooc img.text_tag {width: 32px; height: 10px;}
|
||||
|
||||
.ooc .everyone {color: #002eb8;}
|
||||
.inverted .ooc .everyone {color: #004ed8;} /* Dark mode */
|
||||
.ooc .looc {color: #3A9696;}
|
||||
.ooc .elevated {color: #2e78d9;}
|
||||
.ooc .moderator {color: #184880;}
|
||||
.ooc .developer {color: #1b521f;}
|
||||
.ooc .admin {color: #b82e00;}
|
||||
.ooc .event_manager {color: #660033;}
|
||||
.ooc .aooc {color: #960018;}
|
||||
|
||||
/* Admin: Private Messages */
|
||||
.pm .howto {color: #ff0000; font-weight: bold; font-size: 200%;}
|
||||
.pm .in {color: #ff0000;}
|
||||
.pm .out {color: #ff0000;}
|
||||
.pm .other {color: #0000ff;}
|
||||
|
||||
/* Admin: Channels */
|
||||
.mod_channel {color: #735638; font-weight: bold;}
|
||||
.mod_channel .admin {color: #b82e00; font-weight: bold;}
|
||||
.admin_channel {color: #9611D4; font-weight: bold;}
|
||||
.event_channel {color: #cc3399; font-weight: bold;}
|
||||
|
||||
/* Radio: Misc */
|
||||
.deadsay {color: #530FAD;}
|
||||
.inverted .deadsay {color: #732FCD;} /* Dark mode */
|
||||
.radio {color: #008000;}
|
||||
.deptradio {color: #ff00ff;} /* when all other department colors fail */
|
||||
.newscaster {color: #750000;}
|
||||
|
||||
/* Radio Channels */
|
||||
.comradio {color: #193A7A;}
|
||||
.inverted .comradio {color: #395A9A;} /* Dark mode */
|
||||
.syndradio {color: #6D3F40;}
|
||||
.centradio {color: #5C5C8A;}
|
||||
.airadio {color: #FF00FF;}
|
||||
.entradio {color: #339966;}
|
||||
|
||||
.secradio {color: #A30000;}
|
||||
.engradio {color: #A66300;}
|
||||
.medradio {color: #008160;}
|
||||
.sciradio {color: #993399;}
|
||||
.supradio {color: #5F4519;}
|
||||
.srvradio {color: #6eaa2c;}
|
||||
.expradio {color: #555555;}
|
||||
|
||||
/* Miscellaneous */
|
||||
.name {font-weight: bold;}
|
||||
.say {}
|
||||
.alert {color: #ff0000;}
|
||||
h1.alert, h2.alert {color: #000000;}
|
||||
|
||||
.emote {font-style: italic;}
|
||||
|
||||
/* Game Messages */
|
||||
|
||||
.attack {color: #ff0000;}
|
||||
.moderate {color: #CC0000;}
|
||||
.disarm {color: #990000;}
|
||||
.passive {color: #660000;}
|
||||
|
||||
.critical {color: #ff0000; font-weight: bold; font-size: 150%;}
|
||||
.danger {color: #ff0000; font-weight: bold;}
|
||||
.warning {color: #ff0000; font-style: italic;}
|
||||
.rose {color: #ff5050;}
|
||||
.info {color: #0000CC;}
|
||||
.inverted .info {color: #6060c9;} /* Dark mode */
|
||||
.notice {color: #000099;}
|
||||
.inverted .notice {color: #6060c9;} /* Dark mode */
|
||||
.alium {color: #00ff00;}
|
||||
.cult {color: #800080; font-weight: bold; font-style: italic;}
|
||||
|
||||
.reflex_shoot {color: #000099; font-style: italic;}
|
||||
|
||||
/* Languages */
|
||||
|
||||
.alien {color: #543354;}
|
||||
.tajaran {color: #803B56;}
|
||||
.tajaran_signlang {color: #941C1C;}
|
||||
.akhani {color: #AC398C;}
|
||||
.skrell {color: #00B0B3;}
|
||||
.skrellfar {color: #70FCFF;}
|
||||
.soghun {color: #228B22;}
|
||||
.solcom {color: #22228B;}
|
||||
.changeling {color: #800080;}
|
||||
.sergal {color: #0077FF; font-family: "Comic Sans MS";}
|
||||
.birdsongc {color: #CC9900;}
|
||||
.vulpkanin {color: #B97A57;}
|
||||
.enochian {color: #848A33; letter-spacing:-1pt; word-spacing:4pt; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
|
||||
.daemon {color: #5E339E; letter-spacing:-1pt; word-spacing:0pt; font-family: "Courier New", Courier, monospace;}
|
||||
.bug {color: #9e9e39;}
|
||||
.vox {color: #AA00AA;}
|
||||
.zaddat {color: #941C1C;}
|
||||
.rough {font-family: "Trebuchet MS", cursive, sans-serif;}
|
||||
.say_quote {font-family: Georgia, Verdana, sans-serif;}
|
||||
.terminus {font-family: "Times New Roman", Times, serif, sans-serif}
|
||||
.interface {color: #330033;}
|
||||
|
||||
/*BIG IMG.icon {width: 32px; height: 32px;}*/
|
||||
img.icon {vertical-align: middle; max-height: 1em;}
|
||||
img.icon.bigicon {max-height: 32px;}
|
||||
|
||||
/* Zoom levels */
|
||||
.zoom_normal {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.zoom_more {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.zoom_less {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Debug Logs */
|
||||
.debug_error {color:#FF0000; font-weight:bold}
|
||||
.debug_warning {color:#FF0000;}
|
||||
.debug_info {}
|
||||
.debug_debug {color:#0000FF;}
|
||||
.debug_trace {color:#888888;}
|
||||
|
||||
/* Log animations */
|
||||
.msgsanim-enter-active {
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
}
|
||||
.msgsanim-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
/* Dog mode */
|
||||
.woof {
|
||||
background-color: rgba(255,255,255,0) !important;
|
||||
background-image: url('dog.gif') !important;
|
||||
background-size: cover !important;
|
||||
|
||||
transition: background-color 15s;
|
||||
}
|
||||
|
||||
.woof div, .woof span {
|
||||
background-color: rgba(0,0,0,0) !important;
|
||||
|
||||
transition: background-color 15s;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user