439 lines
9 KiB
CSS
439 lines
9 KiB
CSS
|
/*
|
||
|
|
* @package AJAX_Chat
|
||
|
|
* @author Sebastian Tschan
|
||
|
|
* @author Philip Nicolcev
|
||
|
|
* @copyright (c) Sebastian Tschan
|
||
|
|
* @license GNU Affero General Public License
|
||
|
|
* @link https://blueimp.net/ajax/
|
||
|
|
*/
|
||
|
|
|
||
|
|
@import url('textcolours.ajaxchat.css');
|
||
|
|
|
||
|
|
/* 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: 100px 100px 0 100px;
|
||
|
|
}
|
||
|
|
#loginContent #loginFormContainer, #loginContent #errorContainer {
|
||
|
|
margin: 0 100px;
|
||
|
|
}
|
||
|
|
#loginContent #loginFormContainer div {
|
||
|
|
margin-bottom:7px;
|
||
|
|
}
|
||
|
|
#loginContent #loginRegisteredUsers {
|
||
|
|
padding-top:5px;
|
||
|
|
}
|
||
|
|
#loginContent #copyright {
|
||
|
|
margin: 20px 100px 0 100px;
|
||
|
|
}
|
||
|
|
#content {
|
||
|
|
position:absolute;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
#content #copyright {
|
||
|
|
position:absolute;
|
||
|
|
right:10px;
|
||
|
|
top:10px;
|
||
|
|
}
|
||
|
|
#content #headlineContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
top:3px;
|
||
|
|
}
|
||
|
|
#content #logoutChannelContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
top:50px;
|
||
|
|
}
|
||
|
|
#content #logoutChannelContainer select{
|
||
|
|
width: 105px;
|
||
|
|
height: 22px;
|
||
|
|
}
|
||
|
|
#content #statusIconContainer {
|
||
|
|
position:absolute;
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
}
|
||
|
|
#content #chatList {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
right:10px;
|
||
|
|
top:40px;
|
||
|
|
bottom:70px;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
#content #inputFieldContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
right:10px;
|
||
|
|
bottom:42px;
|
||
|
|
padding-right:4px;
|
||
|
|
}
|
||
|
|
#content #submitButtonContainer {
|
||
|
|
position:absolute;
|
||
|
|
right:10px;
|
||
|
|
bottom:38px;
|
||
|
|
padding:3px;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
right:10px;
|
||
|
|
top:40px;
|
||
|
|
bottom:70px;
|
||
|
|
}
|
||
|
|
#content #helpContainer {
|
||
|
|
position:absolute;
|
||
|
|
right:10px;
|
||
|
|
top:85px;
|
||
|
|
width:360px;
|
||
|
|
bottom:150px;
|
||
|
|
}
|
||
|
|
#content #settingsContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
right:10px;
|
||
|
|
top:40px;
|
||
|
|
bottom:70px;
|
||
|
|
}
|
||
|
|
#content #bbCodeContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
bottom:10px;
|
||
|
|
padding:3px;
|
||
|
|
}
|
||
|
|
#content #colorCodesContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
bottom:37px;
|
||
|
|
padding:3px;
|
||
|
|
z-index:1;
|
||
|
|
}
|
||
|
|
#content #emoticonsContainer {
|
||
|
|
position:absolute;
|
||
|
|
left:10px;
|
||
|
|
bottom:57px;
|
||
|
|
padding:3px;
|
||
|
|
}
|
||
|
|
#content #optionsContainer {
|
||
|
|
position:absolute;
|
||
|
|
right:10px;
|
||
|
|
top:5px;
|
||
|
|
padding:3px;
|
||
|
|
margin-left:auto;
|
||
|
|
margin-top:2px;
|
||
|
|
}
|
||
|
|
#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginContent #loginButton {
|
||
|
|
padding: 1px 2px;
|
||
|
|
}
|
||
|
|
#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:6px;
|
||
|
|
}
|
||
|
|
#content #chatList div {
|
||
|
|
padding: 2px 10px;
|
||
|
|
}
|
||
|
|
#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;
|
||
|
|
background:url('../images/delete.png') no-repeat right;
|
||
|
|
}
|
||
|
|
#content #inputFieldContainer #inputField {
|
||
|
|
width:100%;
|
||
|
|
height:18px;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
|
||
|
|
height:30px;
|
||
|
|
padding: 4px 10px;
|
||
|
|
margin:0px;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer #onlineList, #content #helpContainer #helpList, #content #settingsContainer #settingsList {
|
||
|
|
position:absolute;
|
||
|
|
left:0px;
|
||
|
|
top:25px;
|
||
|
|
right:0px;
|
||
|
|
bottom:0px;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer #onlineList div {
|
||
|
|
padding: 2px 10px;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer #onlineList a {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer #onlineList ul {
|
||
|
|
margin: 5px 0;
|
||
|
|
padding-left:10px;
|
||
|
|
}
|
||
|
|
#content #helpContainer #helpList td, #content #settingsContainer #settingsList td {
|
||
|
|
vertical-align:top;
|
||
|
|
}
|
||
|
|
#content #settingsContainer #settingsList td {
|
||
|
|
vertical-align:middle;
|
||
|
|
}
|
||
|
|
#content #settingsContainer #settingsList td.setting {
|
||
|
|
}
|
||
|
|
#content #settingsContainer #settingsList input.text {
|
||
|
|
width:100px;
|
||
|
|
}
|
||
|
|
#content #settingsContainer #settingsList select.left {
|
||
|
|
text-align:right;
|
||
|
|
}
|
||
|
|
#content #settingsContainer #settingsList input.button {
|
||
|
|
height:22px;
|
||
|
|
vertical-align:middle;
|
||
|
|
margin-bottom:2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
#content #optionsContainer #audioButton.off {
|
||
|
|
background:url('../images/audio-off.png') no-repeat;
|
||
|
|
}
|
||
|
|
#content #optionsContainer #autoScrollButton {
|
||
|
|
background:url('../images/autoscroll.png') no-repeat;
|
||
|
|
}
|
||
|
|
#content #optionsContainer #autoScrollButton.off {
|
||
|
|
background:url('../images/autoscroll-off.png') no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Borders */
|
||
|
|
#content img {
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #colorCodesContainer,
|
||
|
|
#content #colorCodesContainer a, #content textarea {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Misc */
|
||
|
|
#content #bbCodeContainer input, #content #optionsContainer input.button, #content #settingsContainer #settingsList input.button, #content #logoutButton, #content #submitButton, #loginContent #loginButton {
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen,projection,handheld {
|
||
|
|
|
||
|
|
/* Buttons */
|
||
|
|
#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginForm #loginButton {
|
||
|
|
background-color:#000;
|
||
|
|
color:#f0f0f0;
|
||
|
|
border: 1px solid #808080;
|
||
|
|
background-image: linear-gradient(to bottom, #222, #000);
|
||
|
|
background-image: -webkit-linear-gradient(top, #222, #000);
|
||
|
|
}
|
||
|
|
#content select, #loginForm select, #loginForm input, #content textarea {
|
||
|
|
background-color:#000;
|
||
|
|
color:#fafafa;
|
||
|
|
border: 1px solid #808080;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Status Icon */
|
||
|
|
#content #statusIconContainer {
|
||
|
|
background-image: url('../images/loading-sprite.png');
|
||
|
|
}
|
||
|
|
#content .statusContainerOff {
|
||
|
|
background-position: 0px 0px;
|
||
|
|
}
|
||
|
|
#content .statusContainerOn {
|
||
|
|
background-position: 0px -22px;
|
||
|
|
}
|
||
|
|
#content .statusContainerAlert {
|
||
|
|
background-position: 0px -44px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Other Theme Elements */
|
||
|
|
#loginContent {
|
||
|
|
background-color:#000;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#loginContent h1 {
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#loginContent a {
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#loginContent input, #loginContent select {
|
||
|
|
background-color:#212121;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#loginContent #errorContainer {
|
||
|
|
color:red;
|
||
|
|
}
|
||
|
|
#content {
|
||
|
|
background-color:#000;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#content h1 {
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#content a {
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #colorCodesContainer, #content textarea {
|
||
|
|
border-color:gray;
|
||
|
|
background-color:#000;
|
||
|
|
}
|
||
|
|
#content #colorCodesContainer a {
|
||
|
|
border-color:black;
|
||
|
|
}
|
||
|
|
#content #optionsContainer input {
|
||
|
|
background-color:transparent;
|
||
|
|
}
|
||
|
|
#content .rowEven {
|
||
|
|
background-color:#212121;
|
||
|
|
}
|
||
|
|
#content .rowOdd {
|
||
|
|
background-color:#000;
|
||
|
|
}
|
||
|
|
#content #chatList .chatBotErrorMessage {
|
||
|
|
color:red;
|
||
|
|
}
|
||
|
|
#content #chatList a {
|
||
|
|
color:#1E90FF;
|
||
|
|
}
|
||
|
|
#content #chatList .deleteSelected {
|
||
|
|
border-color:red;
|
||
|
|
}
|
||
|
|
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
|
||
|
|
background-color:#212121;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
}
|