Difference between revisions of "Test"

From Official Runecraft Wiki
(Blanked the page)
Tag: Blanking
Line 1: Line 1:
 +
#chat-container
 +
#chat-input
 +
#file-input
 +
<style>
 +
html,
 +
body {
 +
background-color: hsl(0, 0%, 8%);
 +
// margin: 0; // Go fixed
 +
// font-size: 0; // Fix white-space issues if present.
 +
// height: 100vh; // Go fixed
 +
user-select: none;
 +
}
  
 +
// For centering
 +
#chat-container {
 +
display: flex;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
 +
#chat-input {
 +
position: fixed;
 +
bottom: 10px;
 +
height: 40px;
 +
width: 500px;
 +
background-color: hsl(0, 0%, 14%);
 +
border-radius: 6px;
 +
overflow: hidden;
 +
 +
&:before,
 +
&:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: 12px;
 +
bottom: 12px;
 +
background-color: hsla(0, 0%, 22%, 0.4);
 +
}
 +
// Chat input
 +
&:before {
 +
cursor: text;
 +
left: 52px;
 +
width: 40%;
 +
border-radius: 2px;
 +
}
 +
// Emote picker
 +
&:after {
 +
cursor: pointer;
 +
right: 10px;
 +
width: 16px;
 +
border-radius: 8px;
 +
}
 +
#file-input {
 +
cursor: pointer;
 +
display: block;
 +
border-right: 2px solid hsl(0, 0%, 16%);
 +
position: absolute;
 +
top: 2px;
 +
left: 2px;
 +
bottom: 2px;
 +
width: 36px;
 +
transition: background-color 60ms;
 +
 +
&:hover {
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 40px;
 +
background-color: hsl(0, 0%, 28%);
 +
border-right: 0;
 +
transition: background-color 120ms;
 +
}
 +
&:before,
 +
&:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
background-color: hsl(0, 0%, 22%);
 +
}
 +
&:before {
 +
top: 30%;
 +
bottom: 30%;
 +
left: 50%;
 +
width: 2px;
 +
margin-left: -1px;
 +
}
 +
&:after {
 +
left: 30%;
 +
right: 30%;
 +
top: 50%;
 +
height: 2px;
 +
margin-top: -1px;
 +
}
 +
}
 +
}
 +
 +
.chat {
 +
position: fixed;
 +
bottom: 60px;
 +
width: 500px;
 +
display: inline-block;
 +
}
 +
 +
.line-container {
 +
overflow: hidden;
 +
border-radius: 6px;
 +
max-height: 0px;
 +
opacity: 0;
 +
transform: translateX(-300px) scale(0.2);
 +
transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, transform 250ms;
 +
transition-timing-function: ease-out;
 +
 +
 +
&:not(:last-child) {
 +
margin-bottom: 10px;
 +
}
 +
}
 +
 +
.line {
 +
padding: 10px;
 +
background-color: hsl(0, 0%, 14%);
 +
 +
& > div {
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
}
 +
 +
.profile-img {
 +
cursor: pointer;
 +
border-radius: 6px;
 +
width: 60px;
 +
height: 60px;
 +
background-color: hsl(0, 0%, 22%);
 +
margin-right: 10px;
 +
}
 +
 +
.body {
 +
// background-color: black;
 +
 +
.name,
 +
.text {
 +
border-radius: 2px;
 +
background-color: hsl(0, 0%, 28%);
 +
height: 16px;
 +
}
 +
}
 +
 +
.name {
 +
width: 100px;
 +
margin-bottom: 10px;
 +
position: relative;
 +
cursor: pointer;
 +
 +
&:after {
 +
content: '';
 +
display: block;
 +
border-radius: 2px;
 +
background-color: hsla(0, 0%, 22%, 0.4);
 +
height: 16px;
 +
width: 50px;
 +
position: absolute;
 +
right: -60px;
 +
transition: 100ms;
 +
}
 +
}
 +
 +
.profile-img:hover + .body .name:after,
 +
.name:hover:after {
 +
background-color: hsla(0, 0%, 22%, 1);
 +
width: 100px;
 +
right: -110px;
 +
}
 +
 +
.text {
 +
&:not(:last-child) {
 +
margin-bottom: 10px;
 +
}
 +
}
 +
 +
.img {
 +
}
 +
 +
.rich-body {
 +
margin-left: 14px;
 +
margin-top: 36px;
 +
position: relative;
 +
 +
&:before {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
top: -26px;
 +
left: -14px;
 +
bottom: 0;
 +
width: 4px;
 +
background-color: inherit;
 +
}
 +
&:after {
 +
content: '';
 +
display: block;
 +
position: absolute;
 +
height: 16px;
 +
width: 200px;
 +
top: -26px;
 +
background-color: inherit;
 +
border-radius: 2px;
 +
}
 +
}
 +
 +
.img,
 +
.rich-body {
 +
width: 300px;
 +
height: 300px;
 +
cursor: pointer;
 +
border-radius: 6px;
 +
background-color: hsl(0, 0%, 20%);
 +
}
 +
 +
.profile-img,
 +
.name,
 +
.text,
 +
.img,
 +
.rich-body {
 +
opacity: 0;
 +
transform: translateY(20px);
 +
transition: 200ms;
 +
}
 +
</style>

Revision as of 12:44, 16 December 2022

  1. chat-container

#chat-input #file-input <style> html, body { background-color: hsl(0, 0%, 8%); // margin: 0; // Go fixed // font-size: 0; // Fix white-space issues if present. // height: 100vh; // Go fixed user-select: none; }

// For centering

  1. chat-container {

display: flex; justify-content: center; align-items: center; }

  1. chat-input {

position: fixed; bottom: 10px; height: 40px; width: 500px; background-color: hsl(0, 0%, 14%); border-radius: 6px; overflow: hidden;

&:before, &:after { content: ; display: block; position: absolute; top: 12px; bottom: 12px; background-color: hsla(0, 0%, 22%, 0.4); } // Chat input &:before { cursor: text; left: 52px; width: 40%; border-radius: 2px; } // Emote picker &:after { cursor: pointer; right: 10px; width: 16px; border-radius: 8px; } #file-input { cursor: pointer; display: block; border-right: 2px solid hsl(0, 0%, 16%); position: absolute; top: 2px; left: 2px; bottom: 2px; width: 36px; transition: background-color 60ms;

&:hover { top: 0; left: 0; bottom: 0; width: 40px; background-color: hsl(0, 0%, 28%); border-right: 0; transition: background-color 120ms; } &:before, &:after { content: ; display: block; position: absolute; background-color: hsl(0, 0%, 22%); } &:before { top: 30%; bottom: 30%; left: 50%; width: 2px; margin-left: -1px; } &:after { left: 30%; right: 30%; top: 50%; height: 2px; margin-top: -1px; } } }

.chat { position: fixed; bottom: 60px; width: 500px; display: inline-block; }

.line-container { overflow: hidden; border-radius: 6px; max-height: 0px; opacity: 0; transform: translateX(-300px) scale(0.2); transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, transform 250ms; transition-timing-function: ease-out;


&:not(:last-child) { margin-bottom: 10px; } }

.line { padding: 10px; background-color: hsl(0, 0%, 14%);

& > div { display: inline-block; vertical-align: top; } }

.profile-img { cursor: pointer; border-radius: 6px; width: 60px; height: 60px; background-color: hsl(0, 0%, 22%); margin-right: 10px; }

.body { // background-color: black;

.name, .text { border-radius: 2px; background-color: hsl(0, 0%, 28%); height: 16px; } }

.name { width: 100px; margin-bottom: 10px; position: relative; cursor: pointer;

&:after { content: ; display: block; border-radius: 2px; background-color: hsla(0, 0%, 22%, 0.4); height: 16px; width: 50px; position: absolute; right: -60px; transition: 100ms; } }

.profile-img:hover + .body .name:after, .name:hover:after { background-color: hsla(0, 0%, 22%, 1); width: 100px; right: -110px; }

.text { &:not(:last-child) { margin-bottom: 10px; } }

.img { }

.rich-body { margin-left: 14px; margin-top: 36px; position: relative;

&:before { content: ; display: block; position: absolute; top: -26px; left: -14px; bottom: 0; width: 4px; background-color: inherit; } &:after { content: ; display: block; position: absolute; height: 16px; width: 200px; top: -26px; background-color: inherit; border-radius: 2px; } }

.img, .rich-body { width: 300px; height: 300px; cursor: pointer; border-radius: 6px; background-color: hsl(0, 0%, 20%); }

.profile-img, .name, .text, .img, .rich-body { opacity: 0; transform: translateY(20px); transition: 200ms; } </style>

Retrieved from "https://runecraft.wiki/index.php?title=Test&oldid=919"