486 lines
8.8 KiB
CSS
486 lines
8.8 KiB
CSS
/*
|
|
* @package AJAX_Chat
|
|
* @author Sebastian Tschan
|
|
* @copyright (c) Sebastian Tschan
|
|
* @license GNU Affero General Public License
|
|
* @link https://blueimp.net/ajax/
|
|
*/
|
|
|
|
/* Import Username and Text colour CSS file */
|
|
@import url('textcolours.ajaxchat.css');
|
|
|
|
/* word-wrap fix */
|
|
* {
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
/*
|
|
* Borders
|
|
*/
|
|
|
|
#content img {
|
|
border:none;
|
|
}
|
|
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #bbCodeContainer, #content #colorCodesContainer, #content #emoticonsContainer, #content #colorCodesContainer a {
|
|
border-width:1px;
|
|
border-style:solid;
|
|
}
|
|
#content #chatList .deleteSelected {
|
|
border-width:1px;
|
|
border-style:dotted;
|
|
}
|
|
#content #helpContainer #helpList table, #content #settingsContainer #settingsList table {
|
|
border-collapse:collapse;
|
|
}
|
|
|
|
/*
|
|
* Fonts
|
|
*/
|
|
|
|
#loginContent {
|
|
font-family:Verdana, Arial, Helvetica, sans-serif;
|
|
font-size:0.8em;
|
|
}
|
|
#loginContent h1 {
|
|
font-size:1.3em;
|
|
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
#loginContent a {
|
|
text-decoration:none;
|
|
}
|
|
#loginContent a:hover {
|
|
text-decoration:underline;
|
|
}
|
|
#loginContent #loginRegisteredUsers {
|
|
font-size:0.8em;
|
|
}
|
|
#loginContent #copyright {
|
|
font-size:0.8em;
|
|
}
|
|
|
|
#content {
|
|
font-family:Verdana, Arial, Helvetica, sans-serif;
|
|
font-size:0.8em;
|
|
}
|
|
#content h1 {
|
|
font-size:1.3em;
|
|
font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
|
|
font-weight:bold;
|
|
}
|
|
#content h3 {
|
|
font-size:1.0em;
|
|
}
|
|
#content a {
|
|
text-decoration:none;
|
|
}
|
|
#content a:hover {
|
|
text-decoration:underline;
|
|
}
|
|
#content #copyright {
|
|
font-size:0.8em;
|
|
}
|
|
#content #chatList span.dateTime {
|
|
font-size:0.7em;
|
|
}
|
|
#content #chatList .chatBotMessage {
|
|
font-style:italic;
|
|
}
|
|
#content #chatList .chatBotErrorMessage {
|
|
font-style:italic;
|
|
}
|
|
#content #chatList .privmsg {
|
|
font-style:italic;
|
|
}
|
|
#content #chatList .action {
|
|
font-style:italic;
|
|
}
|
|
#content #chatList q {
|
|
font-variant:small-caps;
|
|
}
|
|
#content #chatList code {
|
|
font-size:1.2em;
|
|
}
|
|
#content #onlineListContainer #onlineList div {
|
|
font-size:0.9em;
|
|
}
|
|
#content #helpContainer #helpList td {
|
|
font-size:0.9em;
|
|
}
|
|
#content #helpContainer #helpList td.code {
|
|
font-style:italic;
|
|
}
|
|
#content #settingsContainer #settingsList td {
|
|
font-size:0.9em;
|
|
}
|
|
|
|
/*
|
|
* Positioning
|
|
*/
|
|
|
|
#loginContent {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
#loginContent #loginHeadlineContainer {
|
|
margin-left:100px;
|
|
margin-right:100px;
|
|
margin-top:100px;
|
|
}
|
|
#loginContent #loginFormContainer {
|
|
margin-left:100px;
|
|
margin-right:100px;
|
|
}
|
|
#loginContent #loginFormContainer div {
|
|
margin-bottom:7px;
|
|
}
|
|
#loginContent #loginRegisteredUsers {
|
|
padding-top:5px;
|
|
}
|
|
#loginContent #errorContainer {
|
|
margin-left:100px;
|
|
margin-right:100px;
|
|
}
|
|
#loginContent #copyright {
|
|
margin-top:20px;
|
|
margin-left:100px;
|
|
margin-right:100px;
|
|
}
|
|
|
|
#content {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
#content #copyright {
|
|
position:absolute;
|
|
right:20px;
|
|
top:20px;
|
|
}
|
|
#content #headlineContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
top:5px;
|
|
}
|
|
#content #logoutChannelContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
top:50px;
|
|
}
|
|
#content #statusIconContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
top:50px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
#content #chatList {
|
|
position:absolute;
|
|
left:20px;
|
|
right:230px;
|
|
top:85px;
|
|
bottom:150px;
|
|
overflow:auto;
|
|
}
|
|
#content #inputFieldContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
right:20px;
|
|
bottom:95px;
|
|
padding-right:4px;
|
|
}
|
|
#content #submitButtonContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
bottom:60px;
|
|
}
|
|
#content #onlineListContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
top:85px;
|
|
width:200px;
|
|
bottom:150px;
|
|
}
|
|
#content #helpContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
top:85px;
|
|
width:360px;
|
|
bottom:150px;
|
|
}
|
|
#content #settingsContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
top:85px;
|
|
width:360px;
|
|
bottom:150px;
|
|
}
|
|
#content #bbCodeContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
bottom:20px;
|
|
padding:3px;
|
|
}
|
|
#content #colorCodesContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
bottom:55px;
|
|
padding:3px;
|
|
z-index:1;
|
|
}
|
|
#content #emoticonsContainer {
|
|
position:absolute;
|
|
left:20px;
|
|
bottom:57px;
|
|
padding:3px;
|
|
}
|
|
#content #optionsContainer {
|
|
position:absolute;
|
|
right:20px;
|
|
bottom:20px;
|
|
padding:3px;
|
|
padding-right:0px;
|
|
}
|
|
#content #bbCodeContainer input {
|
|
padding-left:4px;
|
|
padding-right:4px;
|
|
}
|
|
#content #colorCodesContainer a {
|
|
display:block;
|
|
float:left;
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
#content #optionsContainer input {
|
|
vertical-align:middle;
|
|
}
|
|
#content #optionsContainer input.button {
|
|
width:22px;
|
|
height:22px;
|
|
}
|
|
#content #emoticonsContainer a {
|
|
margin-left:1px;
|
|
margin-right:1px;
|
|
}
|
|
#content #emoticonsContainer img {
|
|
vertical-align:middle;
|
|
margin-bottom:2px;
|
|
}
|
|
#content #headlineContainer h1 {
|
|
margin-left:auto;
|
|
margin-top:12px;
|
|
}
|
|
#content #chatList div {
|
|
padding-left:10px;
|
|
padding-top:2px;
|
|
padding-right:10px;
|
|
padding-bottom:2px;
|
|
}
|
|
#content #chatList img {
|
|
vertical-align:middle;
|
|
margin-bottom:2px;
|
|
}
|
|
#content #chatList cite {
|
|
margin-right:5px;
|
|
}
|
|
#content #chatList .bbCodeImage {
|
|
vertical-align:top;
|
|
overflow:auto;
|
|
margin:5px;
|
|
}
|
|
#content #chatList .delete {
|
|
display:block;
|
|
float:right;
|
|
width:10px;
|
|
height:10px;
|
|
margin-top:2px;
|
|
padding-left:5px;
|
|
}
|
|
#content #inputFieldContainer #inputField {
|
|
width:100%;
|
|
height:40px;
|
|
}
|
|
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
|
|
height:30px;
|
|
padding-left:10px;
|
|
padding-top:4px;
|
|
padding-right:10px;
|
|
padding-bottom:4px;
|
|
margin:0px;
|
|
text-align:center;
|
|
}
|
|
#content #onlineListContainer #onlineList, #content #helpContainer #helpList, #content #settingsContainer #settingsList {
|
|
position:absolute;
|
|
left:0px;
|
|
right:0px;
|
|
top:25px;
|
|
bottom:0px;
|
|
overflow:auto;
|
|
}
|
|
#content #onlineListContainer #onlineList div {
|
|
padding-left:10px;
|
|
padding-top:2px;
|
|
padding-right:10px;
|
|
padding-bottom:2px;
|
|
}
|
|
#content #onlineListContainer #onlineList a {
|
|
display:block;
|
|
}
|
|
#content #onlineListContainer #onlineList ul {
|
|
margin-left:0px;
|
|
margin-top:5px;
|
|
margin-bottom:5px;
|
|
padding-left:20px;
|
|
}
|
|
#content #helpContainer #helpList td, #content #settingsContainer #settingsList td {
|
|
padding-left:10px;
|
|
padding-top:4px;
|
|
padding-right:10px;
|
|
padding-bottom:4px;
|
|
vertical-align:top;
|
|
}
|
|
#content #settingsContainer #settingsList td {
|
|
vertical-align:middle;
|
|
}
|
|
#content #settingsContainer #settingsList td.setting {
|
|
width:115px;
|
|
}
|
|
#content #settingsContainer #settingsList input.text {
|
|
width:100px;
|
|
}
|
|
#content #settingsContainer #settingsList select.left {
|
|
text-align:right;
|
|
}
|
|
#content #settingsContainer #settingsList input.button {
|
|
width:22px;
|
|
height:22px;
|
|
vertical-align:middle;
|
|
margin-bottom:2px;
|
|
}
|
|
|
|
/*
|
|
* Misc
|
|
*/
|
|
|
|
@media screen,projection,handheld {
|
|
|
|
#content #bbCodeContainer input, #content #optionsContainer input.button, #content #settingsContainer #settingsList input.button {
|
|
cursor:pointer;
|
|
}
|
|
|
|
}
|
|
|
|
/* Buttons */
|
|
#content #optionsContainer #helpButton {
|
|
background:url('../images/help.png') no-repeat;
|
|
}
|
|
#content #optionsContainer #settingsButton {
|
|
background:url('../images/settings.png') no-repeat;
|
|
}
|
|
#content #optionsContainer #onlineListButton {
|
|
background:url('../images/users.png') no-repeat;
|
|
}
|
|
#content #optionsContainer #audioButton {
|
|
background:url('../images/audio.png') no-repeat 0px 0px;
|
|
}
|
|
#content #optionsContainer #audioButton.off {
|
|
background-position: 0px 100%;
|
|
}
|
|
#content #optionsContainer #autoScrollButton {
|
|
background:url('../images/autoscroll.png') no-repeat 0px 0px;
|
|
}
|
|
#content #optionsContainer #autoScrollButton.off {
|
|
background-position: 0px 100%;
|
|
}
|
|
#content #settingsContainer #settingsList input.playback {
|
|
background:url('../images/playback.png') no-repeat;
|
|
}
|
|
|
|
/*
|
|
* Print layout
|
|
*/
|
|
|
|
@media print {
|
|
|
|
#content {
|
|
position:static;
|
|
}
|
|
#content #copyright {
|
|
display:none;
|
|
}
|
|
#content #headlineContainer {
|
|
display:none;
|
|
}
|
|
#content #logoutChannelContainer {
|
|
display:none;
|
|
}
|
|
#content #statusIconContainer {
|
|
display:none;
|
|
}
|
|
#content #chatList {
|
|
position:static;
|
|
overflow:visible;
|
|
}
|
|
#content #inputFieldContainer {
|
|
display:none;
|
|
}
|
|
#content #submitButtonContainer {
|
|
display:none;
|
|
}
|
|
#content #onlineListContainer {
|
|
display:none;
|
|
}
|
|
#content #helpContainer {
|
|
display:none;
|
|
}
|
|
#content #settingsContainer {
|
|
display:none;
|
|
}
|
|
#content #bbCodeContainer {
|
|
display:none;
|
|
}
|
|
#content #colorCodesContainer {
|
|
display:none;
|
|
}
|
|
#content #emoticonsContainer {
|
|
display:none;
|
|
}
|
|
#content #optionsContainer {
|
|
display:none;
|
|
}
|
|
#content #chatList div {
|
|
padding-bottom:5px;
|
|
}
|
|
#content #chatList img {
|
|
vertical-align:middle;
|
|
margin-bottom:2px;
|
|
}
|
|
#content #chatList cite {
|
|
margin-right:5px;
|
|
}
|
|
#content #chatList .delete {
|
|
display:none;
|
|
}
|
|
|
|
#content #chatList {
|
|
border:none;
|
|
}
|
|
|
|
#content {
|
|
font-family:'times new roman', times, serif;
|
|
font-size:1.0em;
|
|
text-align:justify;
|
|
}
|
|
#content #chatList code {
|
|
font-size:0.8em;
|
|
}
|
|
|
|
#content #chatList .chatBotErrorMessage {
|
|
color:red;
|
|
}
|
|
#content #chatList a {
|
|
color:#1E90FF;
|
|
}
|
|
|
|
}
|