mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-10-31 14:10:08 +00:00
582 lines
12 KiB
Plaintext
582 lines
12 KiB
Plaintext
/**
|
||
* Styles for Tim’s Chat
|
||
*
|
||
* @author Tim Düsterhus, Maximilian Mader
|
||
* @copyright 2010-2014 Tim Düsterhus
|
||
* @license Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
|
||
* @package be.bastelstu.chat
|
||
*/
|
||
|
||
@-webkit-keyframes timsChatNotify {
|
||
from {
|
||
border-color: @wcfContainerBorderColor;
|
||
}
|
||
|
||
to {
|
||
border-color: @wcfInputHoverBorderColor;
|
||
}
|
||
}
|
||
|
||
@-moz-keyframes timsChatNotify {
|
||
from {
|
||
border-color: @wcfContainerBorderColor;
|
||
}
|
||
|
||
to {
|
||
border-color: @wcfInputHoverBorderColor;
|
||
}
|
||
}
|
||
|
||
@-o-keyframes timsChatNotify {
|
||
from {
|
||
border-color: @wcfContainerBorderColor;
|
||
}
|
||
|
||
to {
|
||
border-color: @wcfInputHoverBorderColor;
|
||
}
|
||
}
|
||
|
||
@keyframes timsChatNotify {
|
||
from {
|
||
border-color: @wcfContainerBorderColor;
|
||
}
|
||
|
||
to {
|
||
border-color: @wcfInputHoverBorderColor;
|
||
}
|
||
}
|
||
|
||
// only apply styles to Tim’s Chat
|
||
#tplChat {
|
||
#content {
|
||
// styles related to the topic container
|
||
#timsChatTopic {
|
||
position: relative;
|
||
|
||
#timsChatTopicCloser {
|
||
position: absolute;
|
||
top: @wcfGapSmall;
|
||
right: @wcfGapSmall;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: @wcfLinkColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
#timsChatMessageTabMenu {
|
||
&.singleTab {
|
||
> nav.tabMenu {
|
||
// hide tab menu when single tabbed
|
||
// this is “a bit” hacky
|
||
display: none !important;
|
||
}
|
||
|
||
// overwrite WCF margin overwrite on tab menu content with WCF marginTop like margin
|
||
// this is “a bit” hacky
|
||
margin-top: @wcfGapMedium !important;
|
||
|
||
> .tabMenuContent {
|
||
}
|
||
|
||
.timsChatMessageContainer {
|
||
&.notify {
|
||
-webkit-animation-duration: .2s;
|
||
-webkit-animation-name: timsChatNotify;
|
||
-webkit-animation-iteration-count: 5;
|
||
-webkit-animation-direction: alternate;
|
||
-webkit-animation-timing-function: linear;
|
||
|
||
-moz-animation-duration: .2s;
|
||
-moz-animation-name: timsChatNotify;
|
||
-moz-animation-iteration-count: 5;
|
||
-moz-animation-direction: alternate;
|
||
-moz-animation-timing-function: linear;
|
||
|
||
-o-animation-duration: .2s;
|
||
-o-animation-name: timsChatNotify;
|
||
-o-animation-iteration-count: 5;
|
||
-o-animation-direction: alternate;
|
||
-o-animation-timing-function: linear;
|
||
|
||
animation-duration: .2s;
|
||
animation-name: timsChatNotify;
|
||
animation-iteration-count: 5;
|
||
animation-direction: alternate;
|
||
animation-timing-function: linear;
|
||
|
||
border-color: @wcfInputHoverBorderColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
> nav.tabMenu {
|
||
> ul {
|
||
> li {
|
||
> a {
|
||
.notifyIcon {
|
||
display: none;
|
||
}
|
||
|
||
> .icon, img {
|
||
// fix vertical alignment of images in tabs
|
||
vertical-align: middle;
|
||
margin-right: @wcfGapTiny;
|
||
}
|
||
|
||
// styles related to the close button of private channels in tabs
|
||
.jsChannelCloser {
|
||
&:hover {
|
||
color: @wcfLinkColor;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.notify {
|
||
.notifyIcon {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.timsChatMessageContainer {
|
||
min-height: 100px;
|
||
height: 300px;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
resize: vertical;
|
||
|
||
> ul {
|
||
> .timsChatMessage {
|
||
clear: both;
|
||
|
||
&.unloaded {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
> .timsChatMessageIcon {
|
||
float: left;
|
||
margin-right: -16px;
|
||
}
|
||
|
||
> .timsChatInnerMessageContainer {
|
||
position: relative;
|
||
|
||
> .timsChatAvatarContainer {
|
||
position: relative;
|
||
float: left;
|
||
margin-left: 16px;
|
||
|
||
> .timsChatAvatarExtraIcon {
|
||
position: absolute;
|
||
bottom: -8px;
|
||
right: -8px;
|
||
}
|
||
}
|
||
|
||
.timsChatInnerMessage {
|
||
margin-left: 32 + @wcfGapMedium; // size of avatars + a small gap
|
||
padding-right: @wcfGapSmall;
|
||
|
||
.timsChatUsernameContainer {
|
||
// sender username
|
||
> span:not(.icon):not(.receiver) {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
time {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
&.bubble {
|
||
> .timsChatAvatarContainer {
|
||
margin-left: 0px;
|
||
}
|
||
|
||
.timsChatInnerMessage {
|
||
position: relative;
|
||
|
||
padding: @wcfGapSmall;
|
||
border-radius: @wcfContainerBorderRadius;
|
||
border-style: solid;
|
||
border-width: 1px;
|
||
border-color: @wcfContainerBorderColor;
|
||
|
||
> .timsChatTextContainer {
|
||
> li.timsChatText {
|
||
border-style: solid;
|
||
border-width: 0 0 1px 0;
|
||
border-color: @wcfContainerBorderColor;
|
||
padding: (@wcfGapTiny - 1) 0 @wcfGapTiny;
|
||
|
||
&:last-child {
|
||
border-style: none;
|
||
padding: (@wcfGapTiny - 1) 0 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// :before and :after are used to create the little arrows on the “speech bubble containers”
|
||
&:before, &:after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
width: 0;
|
||
border-style: solid;
|
||
}
|
||
|
||
&:before{
|
||
border-color: transparent @wcfContainerBorderColor;
|
||
left: -@wcfGapSmall;
|
||
top: @wcfGapSmall;
|
||
border-width: @wcfGapSmall @wcfGapSmall @wcfGapSmall 0;
|
||
}
|
||
|
||
&:after {
|
||
border-color: transparent @wcfContainerBackgroundColor;
|
||
left: -@wcfGapSmall + 1;
|
||
top: @wcfGapSmall + 1;
|
||
border-width: (@wcfGapSmall - 1) (@wcfGapSmall - 1) (@wcfGapSmall - 1) 0;
|
||
}
|
||
}
|
||
|
||
&.right {
|
||
> .timsChatAvatarContainer {
|
||
float: right;
|
||
}
|
||
|
||
.timsChatInnerMessage {
|
||
margin-right: 32 + @wcfGapMedium;
|
||
margin-left: 0;
|
||
|
||
&:before{
|
||
border-color: transparent @wcfContainerBorderColor;
|
||
left: auto;
|
||
right: -@wcfGapSmall;
|
||
top: @wcfGapSmall;
|
||
border-width: @wcfGapSmall 0 @wcfGapSmall @wcfGapSmall;
|
||
}
|
||
|
||
&:after {
|
||
border-color: transparent @wcfContainerBackgroundColor;
|
||
left: auto;
|
||
right: -@wcfGapSmall + 1;
|
||
top: @wcfGapSmall + 1;
|
||
border-width: (@wcfGapSmall - 1) 0 (@wcfGapSmall - 1) (@wcfGapSmall - 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(even) {
|
||
> .timsChatInnerMessageContainer {
|
||
&.bubble {
|
||
.timsChatInnerMessage {
|
||
background-color: @wcfContainerAccentBackgroundColor;
|
||
|
||
&:after {
|
||
border-color: transparent @wcfContainerAccentBackgroundColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .timsChatInnerMessageContainer {
|
||
margin-bottom: @wcfGapSmall;
|
||
}
|
||
}
|
||
}
|
||
|
||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||
display: none;
|
||
}
|
||
|
||
&.markEnabled {
|
||
.timsChatText {
|
||
ul + .timsChatMessageMarker {
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.timsChatMessage {
|
||
&.checked {
|
||
> .timsChatInnerMessageContainer {
|
||
&.bubble {
|
||
> .timsChatInnerMessage {
|
||
background-color: @wcfSelectedBackgroundColor;
|
||
color: @wcfSelectedColor;
|
||
|
||
&:after {
|
||
border-color: transparent @wcfSelectedBackgroundColor;
|
||
}
|
||
}
|
||
|
||
&.right {
|
||
> .timsChatInnerMessage {
|
||
&:after {
|
||
border-color: transparent @wcfSelectedBackgroundColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:not(.bubble) {
|
||
.timsChatInnerMessage {
|
||
background-color: @wcfSelectedBackgroundColor;
|
||
color: @wcfSelectedColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&:not(.checked) {
|
||
> .timsChatInnerMessageContainer {
|
||
&.bubble {
|
||
.timsChatText {
|
||
&.checked {
|
||
background-color: @wcfSelectedBackgroundColor;
|
||
color: @wcfSelectedColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .timsChatInnerMessageContainer {
|
||
.timsChatMessageMarker {
|
||
display: inline-block;
|
||
}
|
||
|
||
.timsChatMessageBlockMarker {
|
||
top: 0;
|
||
}
|
||
|
||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||
position: absolute;
|
||
right: -@wcfGapLarge ;
|
||
}
|
||
|
||
&.bubble {
|
||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||
right: -@wcfGapLarge - 1;
|
||
}
|
||
|
||
&.right {
|
||
.timsChatMessageMarker, .timsChatMessageBlockMarker {
|
||
// maybe find a better way, will do it for now
|
||
right: -@wcfGapLarge - @wcfGapMedium - 32 - 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#smilies {
|
||
.marginTop();
|
||
|
||
// don't display the smiley box on low resolution devices as a button will be shown instead
|
||
@media only screen and (max-width: 800px) {
|
||
display: none;
|
||
}
|
||
|
||
&, &.invisible {
|
||
-webkit-transition: opacity .2s ease-in-out;
|
||
-moz-transition: opacity .2s ease-in-out;
|
||
-ms-transition: opacity .2s ease-in-out;
|
||
-o-transition: opacity .2s ease-in-out;
|
||
transition: opacity .2s ease-in-out;
|
||
}
|
||
|
||
&.invisible {
|
||
opacity: .5;
|
||
}
|
||
}
|
||
|
||
#timsChatOptions {
|
||
float: right;
|
||
|
||
// styles related to the smiley button that replaces the smiley box on low resolution devices
|
||
#timsChatSmileyPopupButton {
|
||
display: none;
|
||
|
||
@media only screen and (max-width: 800px) {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
// fix option buttons on low resolution devices, it will become a dropup not a dropdown
|
||
> nav.buttonGroupNavigation {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
|
||
@media only screen and (max-width: 800px) {
|
||
margin-right: @wcfGapSmall;
|
||
|
||
> ul {
|
||
right: 1px;
|
||
top: auto;
|
||
bottom: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// clear the float on the first element after the option container, maybe someone alters their templates and puts an element down there ;)
|
||
+ * {
|
||
clear: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sidebar {
|
||
> div {
|
||
> fieldset {
|
||
padding-right: @wcfGapTiny;
|
||
|
||
> div {
|
||
overflow-y: auto;
|
||
|
||
> ul {
|
||
padding-right: @wcfGapSmall;
|
||
}
|
||
}
|
||
|
||
> div.overflowVisible {
|
||
overflow-y: visible;
|
||
}
|
||
|
||
&#timsChatUserListContainer {
|
||
> div {
|
||
height: 250px;
|
||
}
|
||
}
|
||
|
||
&#timsChatRoomListContainer {
|
||
> div#timsChatRoomList {
|
||
height: 150px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#timsChatUserList {
|
||
> ul {
|
||
> .timsChatUser {
|
||
&.you {
|
||
a {
|
||
&:hover {
|
||
text-decoration: none;
|
||
cursor: default;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.away {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
a {
|
||
img {
|
||
margin-right: @wcfGapTiny;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#timsChatUploadInput {
|
||
display: none;
|
||
}
|
||
|
||
#timsChatUploadContainer {
|
||
.innerError {
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
#timsChatUploadDropdownMenu {
|
||
z-index: 398;
|
||
}
|
||
|
||
#timsChatCopyrightDialog {
|
||
> div {
|
||
background-repeat: no-repeat;
|
||
background-position: right top;
|
||
}
|
||
}
|
||
|
||
#fish {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.dialogContent {
|
||
.smileyList {
|
||
> li {
|
||
> a {
|
||
img {
|
||
margin: @wcfGapTiny;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
html.fullscreen {
|
||
html, body {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
&,
|
||
body,
|
||
#tplChat #main,
|
||
#tplChat #main > div,
|
||
#tplChat #main > div > div,
|
||
#tplChat #content {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
#top,
|
||
#pageHeader,
|
||
#pageFooter,
|
||
#mainMenu,
|
||
#topMenu {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar, #main, #content {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
#tplChat {
|
||
#content {
|
||
.timsChatMessageContainer {
|
||
resize: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main, #content {
|
||
padding-top: 0;
|
||
border-top: none;
|
||
border-bottom: none;
|
||
border-radius: 0;
|
||
}
|
||
}
|