61 lines
3.5 KiB
CSS
61 lines
3.5 KiB
CSS
/* Elements */
|
|
|
|
html {height: 100%; box-sizing: border-box; font-family: Verdana,sans-serif; font-size: 15px; color: #2c9cdc; background-color: #000}*,*:before,*:after{box-sizing: inherit}
|
|
footer {display: block; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid; margin-top: 24px; text-align: center}
|
|
a {color: inherit}
|
|
b {font-weight: bolder}
|
|
h3 {font-weight: 400; font-size: 24px; border-bottom: 1px solid; padding-bottom: 4px; margin-top: 5px; margin-bottom: 5px}
|
|
img {border-style: none; vertical-align: middle; max-width: 100%; height: auto}
|
|
|
|
/* Classes */
|
|
|
|
.wchat-button {border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none; cursor: pointer}
|
|
.wchat-button:hover {color: #000; background-color: #2c9cdc}
|
|
.wchat-chswbt {color: #000; background-color: #2c9cdc; border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none; cursor: pointer}
|
|
.wchat-nobutton {margin-top: 0; margin-bottom: 0; border: none; display: inline-block; height: 36px; padding: 10px 8px; text-decoration: none}
|
|
.wchat-content {margin-left: auto; margin-right: auto; height: calc(100% - 124px); max-width: 1600px; padding: 8px}
|
|
|
|
.wchat-chatout {font-family: monospace; padding: 8px; border-collapse: collapse; line-height: 1; border: 1px solid; overflow: hidden; display: flex; flex-direction: column-reverse; overflow-wrap: anywhere}
|
|
.wchat-chatout tr {display: block}
|
|
.wchat-chatout td {white-space: nowrap}
|
|
.wchat-chatout #u {width: 100%; font-weight: bolder}
|
|
.wchat-chatout #d, #t {text-align: right; font-size: 0.75em}
|
|
.wchat-chatout #txt {white-space: normal; width: 100%; padding-left: 10px; padding-top: 0; padding-bottom: 5px}
|
|
.wchat-chatout #err {white-space: normal; width: 100%; padding: 0; padding-bottom: 5px; display: block}
|
|
|
|
.wchat-tooltip {cursor: help; display: block}
|
|
[wchat-tooltip-text] {position: relative}
|
|
[wchat-tooltip-text]::after {content: attr(wchat-tooltip-text); pointer-events: none; opacity: 0; transition: opacity 0.5s; display: block; position: absolute; bottom: 1.5em; padding: 0.5em; z-index: 1; background-color: #000; border: solid 1px; border-radius: 0.5em}
|
|
[wchat-tooltip-text]:hover::after {opacity: 1}
|
|
|
|
/* IDs */
|
|
|
|
#wchat-chatlog {height: 500px; width: 50%; float: left}
|
|
#wchat-dmlog {height: 500px; width: 50%}
|
|
#wchat-servlog {max-height: 100px}
|
|
|
|
#wchat-chatsw {width: 100%; border: 1px solid; font-family: monospace; font-weight: bolder; margin-top: 5px; margin-bottom: 5px}
|
|
#wchat-chatsw td {width: 50%; border: 1px solid; text-align: center}
|
|
#wchat-chswbt-dm #long {display: inherit}
|
|
#wchat-chswbt-dm #short {display: none}
|
|
|
|
#wchat-chatin {font-family: monospace; border-collapse: collapse; line-height: 1; border: 1px solid; clear: both; display: flex; margin-top: 5px; margin-bottom: 5px}
|
|
#wchat-chatin tbody {width: 100%}
|
|
#wchat-chatin tr {display: flex}
|
|
#wchat-chatin td {width: 100%; padding: 1px 10px}
|
|
#wchat-chatin p {width: 100%; margin: 10px 0px}
|
|
#wchat-chatin #u {font-weight: bolder}
|
|
#wchat-chatin input {width: 100%; font-family: inherit; font-size: inherit; color: inherit; background-color: #000; padding: 12px}
|
|
|
|
/* Hide/change some elements on small screens */
|
|
@media screen and (max-width: 850px){
|
|
.wchat-chatout #d {display: none}
|
|
}
|
|
|
|
/* Hide/change some elements on very small screens */
|
|
@media screen and (max-width: 500px){
|
|
.wchat-chatout #t {display: none}
|
|
#wchat-chatsw #long {display: none}
|
|
#wchat-chatsw #short {display: inherit}
|
|
}
|