aboutsummaryrefslogtreecommitdiff
path: root/webAO/styles/chatbox/key.css
diff options
context:
space:
mode:
Diffstat (limited to 'webAO/styles/chatbox/key.css')
-rw-r--r--webAO/styles/chatbox/key.css294
1 files changed, 156 insertions, 138 deletions
diff --git a/webAO/styles/chatbox/key.css b/webAO/styles/chatbox/key.css
index 4debe72..8a605ee 100644
--- a/webAO/styles/chatbox/key.css
+++ b/webAO/styles/chatbox/key.css
@@ -1,209 +1,227 @@
.text_white {
- color: rgb(255,255,255);
+ color: rgb(255, 255, 255);
}
.text_blue {
- color: rgb(000,043,152);
+ color: rgb(000, 043, 152);
}
.text_green {
- color: rgb(080,255,080);
+ color: rgb(080, 255, 080);
}
.text_red {
- color: rgb(179,014,014);
+ color: rgb(179, 014, 014);
}
.text_orange {
- color: rgb(255,116,088);
+ color: rgb(255, 116, 088);
}
.text_yellow {
- color: rgb(255,255,200);
+ color: rgb(255, 255, 200);
}
.text_pink {
- color: rgb(255,200,200);
+ color: rgb(255, 200, 200);
}
.text_cyan {
- color: rgb(100,100,255);
+ color: rgb(100, 100, 255);
}
.text_cyan {
- color: rgb(179,014,014);
+ color: rgb(179, 014, 014);
}
.text_grey {
- color: #bbb;
+ color: #bbb;
}
#client_chatcontainer {
- display: block;
- position: absolute;
- bottom: 0;
- left: 0;
- height: 33%;
- width: 100%;
- filter: none;
- font-family: "Verdana";
- transition: height 1s linear;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 33%;
+ width: 100%;
+ filter: none;
+ font-family: "Verdana";
+ transition: height 1s linear;
}
#client_chatdecoration {
- display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 80%;
- background: rgba(000,000,080,0.5);
- background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(000,000,80,0.5) 5%,rgba(000,000,080,0.5) 95%, rgba(0,0,0,0) 100%);
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 80%;
+ background: rgba(000, 000, 080, 0.5);
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(000, 000, 80, 0.5) 5%,
+ rgba(000, 000, 080, 0.5) 95%,
+ rgba(0, 0, 0, 0) 100%
+ );
}
#client_name {
- display: block;
- position: absolute;
- left: 2%;
- top: 0;
- height: 15%;
- min-width: 4em;
- font-size: 0.9em;
- background: rgba(000,043,152,0.5);
- margin: 0;
- padding: 0.5% 3%;
- border-color: #ca9d86;
- border-style: ridge;
- border-width: 0.1em;
- border-radius: 0.15em;
- z-index: 1;
+ display: block;
+ position: absolute;
+ left: 2%;
+ top: 0;
+ height: 15%;
+ min-width: 4em;
+ font-size: 0.9em;
+ background: rgba(000, 043, 152, 0.5);
+ margin: 0;
+ padding: 0.5% 3%;
+ border-color: #ca9d86;
+ border-style: ridge;
+ border-width: 0.1em;
+ border-radius: 0.15em;
+ z-index: 1;
}
#client_inner_name {
- text-justify: distribute;
- margin: 0;
- line-height: 100%;
- text-shadow: 2px 2px black;
+ text-justify: distribute;
+ margin: 0;
+ line-height: 100%;
+ text-shadow: 2px 2px black;
}
#client_chat {
- display: block;
- position: absolute;
- bottom: 4%;
- left: 3%;
- width: 94%;
- height: 70%;
- margin: auto;
- border-color: #ca9d86;
- border-style: ridge;
- border-width: 0.1em;
- border-radius: 0.15em;
- font-size: 1.6em;
- word-break: keep-all;
- overflow-wrap: break-word;
- text-align: left;
- overflow: hidden;
- scroll-behavior: smooth;
- font-size: 75%;
+ display: block;
+ position: absolute;
+ bottom: 4%;
+ left: 3%;
+ width: 94%;
+ height: 70%;
+ margin: auto;
+ border-color: #ca9d86;
+ border-style: ridge;
+ border-width: 0.1em;
+ border-radius: 0.15em;
+ font-size: 1.6em;
+ word-break: keep-all;
+ overflow-wrap: break-word;
+ text-align: left;
+ overflow: hidden;
+ scroll-behavior: smooth;
+ font-size: 75%;
}
#client_inner_chat {
- font-size: 1em;
- margin: 1px;
- line-height: 100%;
- text-shadow: 2px 2px black;
- padding: 1% 8%;
+ font-size: 1em;
+ margin: 1px;
+ line-height: 100%;
+ text-shadow: 2px 2px black;
+ padding: 1% 8%;
}
#client_chatwaiting {
- display: block;
- position: absolute;
- right: 2%;
- bottom: 15%;
- line-height: 0.5;
- color: #dba398;
- animation: idling 0.4s linear infinite alternate;
- transform: rotate(90deg);
+ display: block;
+ position: absolute;
+ right: 2%;
+ bottom: 15%;
+ line-height: 0.5;
+ color: #dba398;
+ animation: idling 0.4s linear infinite alternate;
+ transform: rotate(90deg);
}
@keyframes idling {
- 0% {
- transform: rotate(90deg) scaleY(0);
- }
+ 0% {
+ transform: rotate(90deg) scaleY(0);
+ }
- 100% {
- transform: rotate(90deg) scaleY(1);
- }
+ 100% {
+ transform: rotate(90deg) scaleY(1);
+ }
}
#client_trackstatus {
- display: none;
+ display: none;
}
#client_clock {
- position: absolute;
- top: 1%;
- left: 1%;
- width: 12%;
- height: 15%;
- background: url("bricks.svg");
- background-size: 1.5em;
- border: #ffbe9f 3px ridge;
- border-radius: 100%;
- font-family: serif;
+ position: absolute;
+ top: 1%;
+ left: 1%;
+ width: 12%;
+ height: 15%;
+ background: url("bricks.svg");
+ background-size: 1.5em;
+ border: #ffbe9f 3px ridge;
+ border-radius: 100%;
+ font-family: serif;
}
#client_clock_month {
- position: absolute;
- width: 90%;
- height: 15%;
- left: 5%;
- top: 8%;
- margin: 0;
- color: #52443c;
- background: #ffb183;
- border: 2px white outset;
- border-radius: 100%;
- text-shadow: -1px -1px 0 #d7e5d9, 1px -1px 0 #d7e5d9, -1px 1px 0 #d7e5d9, 1px 1px 0 #d7e5d9;
- font-size: small;
- line-height: 1;
- font-size: 0.4em;
+ position: absolute;
+ width: 90%;
+ height: 15%;
+ left: 5%;
+ top: 8%;
+ margin: 0;
+ color: #52443c;
+ background: #ffb183;
+ border: 2px white outset;
+ border-radius: 100%;
+ text-shadow:
+ -1px -1px 0 #d7e5d9,
+ 1px -1px 0 #d7e5d9,
+ -1px 1px 0 #d7e5d9,
+ 1px 1px 0 #d7e5d9;
+ font-size: small;
+ line-height: 1;
+ font-size: 0.4em;
}
#client_clock_date {
- position: absolute;
- width: 80%;
- height: 80%;
- left: 10%;
- top: 10%;
- margin: 0;
- color: #ffe;
- text-shadow: -1px -1px 0 #78320b, 1px -1px 0 #78320b, -1px 1px 0 #78320b, 1px 1px 0 #78320b;
- font-size: 1.5em;
- background: rgba(255,255,255,0.7);
- border-radius: 100%;
- line-height: 1.8;
+ position: absolute;
+ width: 80%;
+ height: 80%;
+ left: 10%;
+ top: 10%;
+ margin: 0;
+ color: #ffe;
+ text-shadow:
+ -1px -1px 0 #78320b,
+ 1px -1px 0 #78320b,
+ -1px 1px 0 #78320b,
+ 1px 1px 0 #78320b;
+ font-size: 1.5em;
+ background: rgba(255, 255, 255, 0.7);
+ border-radius: 100%;
+ line-height: 1.8;
}
#client_clock_weekday {
- position: absolute;
- width: 25%;
- height: 25%;
- right: 0;
- bottom: 0;
- margin: 0;
- color: #ccc;
- text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
- text-decoration: underline;
- font-size: smaller;
- font-weight: bold;
- background-color: #c7856f;
- border: #ffc89f 3px ridge;
- border-radius: 100%;
- line-height: 2;
- font-size: 0.4em;
+ position: absolute;
+ width: 25%;
+ height: 25%;
+ right: 0;
+ bottom: 0;
+ margin: 0;
+ color: #ccc;
+ text-shadow:
+ -1px -1px 0 #333,
+ 1px -1px 0 #333,
+ -1px 1px 0 #333,
+ 1px 1px 0 #333;
+ text-decoration: underline;
+ font-size: smaller;
+ font-weight: bold;
+ background-color: #c7856f;
+ border: #ffc89f 3px ridge;
+ border-radius: 100%;
+ line-height: 2;
+ font-size: 0.4em;
}
#client_clock_time {
- display: none;
-} \ No newline at end of file
+ display: none;
+}