xmpp.chapril.org-conversejs/mockup/less/mockup.less

277 lines
7.0 KiB
Plaintext

// overrides for the base css of converse/inverse
@text-color: #212529;
@link-color: #007bff;
@hover-color: #0056b3;
@bg-color: #578ea9;
@primary-bg-color: #007bff;
@primary-text-color: #fff;
body {
height:100vh; background-color:@bg-color; color:@text-color;
.brand-heading {
margin:auto; font-size:6em; font-weight:bold;
.icon-conversejs { font-size:0.88em; }
}
}
.converse-bg {
position:relative; height:100vh; text-align:center; color:#fff;
.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
}
.xmpp-status, .xmpp-status-menu {
.online { color:#28a745; }
.dnd { color:#dc3545; }
.away { color:#17a2b8; }
.logout, .offline { color:#868e96; }
}
#mockups {
position:fixed; bottom:0; left:50%; padding:7px; z-index:2000;
background-color:@bg-color; transform:translate(-50%, 0%);
a {
width:30px; padding:4px; background:#aaa; border:1px solid #000;
color:#000; font-size:0.9em;
}
}
#conversejs {
margin:10px 0 0;
p { margin-bottom:1rem; }
a, a:visited { color:@link-color; }
a:hover { color:@hover-color; }
canvas { background:#000; border-radius:4px; margin:2px 0; }
form.pure-form.converse-form {
input[type=button], input[type=submit] { margin-right:0; }
}
.badge { padding:0.25em 0.4em; line-height:1; font-weight:700; font-size:0.9em; }
.btn.btn-primary { color:@primary-text-color; }
.chat-head .avatar { border-radius:5px; }
.fa {
font:normal normal normal 14px/1 FontAwesome;
display:inline-block; font-size:inherit; text-rendering:auto;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
#controlbox {
margin-right:0.5em;
.controlbox-pane { height:100%; border-radius:5px; }
.controlbox-pane label { margin:8px; }
#login-dialog {
.brand-heading { margin-top:3.5%; font-size:2.5em; color:@bg-color; }
}
#chatrooms .rooms-list-container { margin:10px 0; }
}
#converse-roster {
height:calc(~"100% - 70px"); margin-top:0; padding-bottom:15px; overflow:auto;
border-bottom:1px solid #777;
.roster-filter-form {
margin:5px 0 0;
input { width:56%; margin-right:5px; }
span { margin:0; padding:0.2em; color:#888; cursor:pointer; }
span.fa-user { color:#000; }
.form-group { margin-bottom:0.5rem; }
}
.roster-contacts {
height:auto; font-size:0.875rem; overflow:hidden;
dd {
height:28px;
a { text-overflow:initial; overflow:visible; }
a.remove-xmpp-contact { font-size:0.95em; }
}
}
}
#minimized-chats .badge { position:absolute; right:122px; bottom:8px; border:1px solid #111; }
&.fullscreen {
width:100%; height:100%; right:0; bottom:0; color:@text-color;
&.login {
width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
#controlbox #login-dialog {
height:100%; border-radius:5px;
.brand-heading { font-size:6em; }
.converse-form { margin:0; padding:3em 2em 3em; }
}
}
&.chatbox {
margin:0;
.chatbox { width:100%; }
.chatbox .box-flyout { width:100%; height:100vh; }
}
#controlbox {
width:100%; margin-right:0;
.box-flyout { width:100%; }
.controlbox-pane { height:100vh; border-radius:0; }
}
.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
}
.sidebar {
display:none; position:absolute; width:50px; height:100vh; padding:10px 0;
background-color:@bg-color; text-align:center;
.chatbox-btn {
float:none; margin:0; font-size:1.35em;
&.fa-vcard { margin-top:30px; }
}
.bottom { position:absolute; bottom:10px; }
}
.chatbox {
.chat-content { padding:0.5em; }
.chat-body {
background:#fff;
.chat-message {
margin:0.3em;
canvas { vertical-align:middle; background:#777; }
.chat-msg-me canvas { background:@bg-color; }
.chat-msg-them canvas { background:#e77051; }
.chat-msg-author { float:none; }
}
}
form.sendXMPPMessage {
textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
.chat-toolbar {
a, li.toggle-toolbar-menu { color:@text-color; }
}
}
}
.chatroom .box-flyout .chatroom-body {
.chat-area {
min-width:100%; height:395px;
.chat-content { padding:0.5em; }
}
.chat-info { color:#fff; line-height:normal; }
.occupants {
.chatroom-features { bottom:0; width:auto; }
ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
}
}
#users {
position:relative;
#chatrooms {
padding-bottom:5px; border-bottom:1px solid #aaa;
.rooms-list-container dl.rooms-list {
.available-chatroom, .open-chatroom { padding:0.1em 0; }
a + a { line-height:22px; }
}
}
#chatrooms, #contacts { margin-top:0.75em; }
.userinfo {
padding-bottom:10px; border-bottom:1px solid #aaa;
.username { margin-left:5px; }
.d-flex { margin-bottom:2px; }
}
&.controlbox-pane { height:450px; text-align:left; }
.chatbox-btn { margin:0; color:@link-color; }
}
}
@media screen and (max-width: 575px) {
body {
.brand-heading { font-size:3.75em; }
}
#conversejs {
&.fullscreen.login, & {
#controlbox #login-dialog .brand-heading { font-size:3.75em; }
}
.chatbox .chat-body { border-radius:7px; }
.flyout { border-radius:4px; }
}
}
@media screen and (max-width: 767px) {
#conversejs {
left:0; margin:0;
&.fullscreen {
&.chatbox {
> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
&.sidebar-open {
#controlbox #users { display:block; }
> .chatbox:not(#controlbox), .chatroom { display:none; }
}
.chatbox .box-flyout { left:0; }
}
}
&.login {
margin:10px;
#controlbox {
margin:0;
.controlbox-pane { font-size:1.15em; }
&.chatbox { width:100%; }
}
.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
}
&.sidebar-open {
#controlbox #users { display:block; }
> .chatbox:not(#controlbox) { display:none; }
}
#controlbox {
#users {
position:absolute; top:0; left:50px; display:none;
width:calc(~"100% - 50px");
}
.box-flyout { width:100%; left:0; }
.sidebar { display:block; }
}
#users.controlbox-pane { height:100vh; }
#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
> .chatbox { width:calc(~"100% - 50px"); }
.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
.chatbox .box-flyout {
left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
}
}
}
@media screen and (min-width: 576px) {
#conversejs {
.offset-sm-2 { margin-left: 16.666667%; }
}
}
@media screen and (min-width: 768px) {
#conversejs {
.offset-md-2 { margin-left: 16.666667%; }
.offset-md-3 { margin-left: 25%; }
}
}
@media screen and (min-width: 992px) {
#conversejs {
.offset-lg-2 { margin-left: 16.666667%; }
.offset-lg-3 { margin-left: 25%; }
}
}
@media screen and (min-width: 1200px) {
#conversejs {
.offset-xl-2 { margin-left: 16.666667%; }
}
}
@media screen and (max-height: 450px) {
#conversejs { left:0; }
}
@media screen and (max-width: 480px) {
#conversejs { width:auto; }
}