Skip to content

C
converse.js
Commit e6d56314 authored by JC Brand's avatar JC Brand
Browse files
Options

Start moving css from mockup.css into the core sass files

parent 90035a3c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 809 additions and 776 deletions
css/converse.css
View file @ e6d56314
This diff is collapsed.
css/inverse.css
View file @ e6d56314
This diff is collapsed.
mockup.html deleted 100644 → 0
View file @ 90035a3c
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Converse.js Live Mockup</title>
<meta name="description" content="Converse.js: A chat client for your website" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
</head>
<body>
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Mockups</h2>
</header>
</div>
<ul>
<li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul>
</body>
</html>
mockup/chatbox.html
View file @ e6d56314
......@@ -113,7 +113,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Personal message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</div>
</form>
</div>
......
mockup/chatroom.html
View file @ e6d56314
......@@ -91,7 +91,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</div>
</form>
</div>
......
mockup/converse.html
View file @ e6d56314
......@@ -10,7 +10,11 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body>
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs" class="chatbox">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
......@@ -110,7 +114,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Personal message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</div>
</form>
</div>
......@@ -180,7 +184,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
<textarea class="chat-textrea form-control" placeholder="Message"></textarea>
</div>
</form>
</div>
......
mockup/css/mockup.css
View file @ e6d56314
body {
height: 100vh;
background-color: #578ea9;
color: #212529;
}
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
}
body .brand-heading .icon-conversejs {
font-size: 0.88em;
}
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
.converse-bg .brand-heading {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.xmpp-status .online,
.xmpp-status-menu .online {
color: #28a745;
}
.xmpp-status .dnd,
.xmpp-status-menu .dnd {
color: #dc3545;
}
.xmpp-status .away,
.xmpp-status-menu .away {
color: #17a2b8;
}
.xmpp-status .logout,
.xmpp-status-menu .logout,
.xmpp-status .offline,
.xmpp-status-menu .offline {
color: #868e96;
}
#mockups {
position: fixed;
bottom: 0;
left: 50%;
padding: 7px;
z-index: 2000;
background-color: #578ea9;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
#mockups a {
width: 30px;
padding: 4px;
background: #aaa;
border: 1px solid #000;
color: #000;
font-size: 0.9em;
}
#conversejs {
margin: 10px 0 0;
}
#conversejs p {
margin-bottom: 1rem;
}
#conversejs a,
#conversejs a:visited {
color: #007bff;
}
#conversejs a:hover {
color: #0056b3;
}
#conversejs canvas {
background: #000;
border-radius: 4px;
margin: 2px 0;
}
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
margin-right: 0;
}
#conversejs .badge {
padding: 0.25em 0.4em;
line-height: 1;
font-weight: 700;
font-size: 0.9em;
}
#conversejs .btn.btn-primary {
color: #fff;
}
#conversejs .chat-head .avatar {
border-radius: 5px;
}
#conversejs .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;
}
#conversejs #controlbox {
margin-right: 0.5em;
}
#conversejs #controlbox .controlbox-pane {
height: 100%;
border-radius: 5px;
}
#conversejs #controlbox .controlbox-pane label {
margin: 8px;
}
#conversejs #controlbox #login-dialog .brand-heading {
margin-top: 3.5%;
font-size: 2.5em;
color: #578ea9;
}
#conversejs #controlbox #chatrooms .rooms-list-container {
margin: 10px 0;
}
#conversejs #converse-roster {
height: calc(100% - 70px);
margin-top: 0;
padding-bottom: 15px;
overflow: auto;
border-bottom: 1px solid #777;
}
#conversejs #converse-roster .roster-filter-form {
margin: 5px 0 0;
}
#conversejs #converse-roster .roster-filter-form input {
width: 56%;
margin-right: 5px;
}
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer;
}
#conversejs #converse-roster .roster-filter-form span.fa-user {
color: #000;
}
#conversejs #converse-roster .roster-filter-form .form-group {
margin-bottom: 0.5rem;
}
#conversejs #converse-roster .roster-contacts {
height: auto;
font-size: 0.875rem;
overflow: hidden;
}
#conversejs #converse-roster .roster-contacts dd {
height: 28px;
}
#conversejs #converse-roster .roster-contacts dd a {
text-overflow: initial;
overflow: visible;
}
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
font-size: 0.95em;
}
#conversejs #minimized-chats .badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid #111;
}
#conversejs.fullscreen {
width: 100%;
height: 100%;
right: 0;
bottom: 0;
color: #212529;
}
#conversejs.fullscreen.login {
width: calc(100vw - 20px);
......@@ -216,117 +44,9 @@ body .brand-heading .icon-conversejs {
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
height: calc(100vh - 95px);
}
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: #578ea9;
text-align: center;
}
#conversejs .sidebar .chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em;
}
#conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 30px;
}
#conversejs .sidebar .bottom {
position: absolute;
bottom: 10px;
}
#conversejs .chatbox .chat-content {
padding: 0.5em;
}
#conversejs .chatbox .chat-body {
background: #fff;
}
#conversejs .chatbox .chat-body .chat-message {
margin: 0.3em;
}
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #777;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-me canvas {
background: #578ea9;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-them canvas {
background: #e77051;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
float: none;
}
#conversejs .chatbox form.sendXMPPMessage textarea {
resize: none;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #212529;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
min-width: 100%;
height: 395px;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0.5em;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #fff;
line-height: normal;
}
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0;
width: auto;
}
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help;
}
#conversejs #users {
position: relative;
}
#conversejs #users #chatrooms {
padding-bottom: 5px;
border-bottom: 1px solid #aaa;
}
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
padding: 0.1em 0;
}
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list a + a {
line-height: 22px;
}
#conversejs #users #chatrooms,
#conversejs #users #contacts {
margin-top: 0.75em;
}
#conversejs #users .userinfo {
padding-bottom: 10px;
border-bottom: 1px solid #aaa;
}
#conversejs #users .userinfo .username {
margin-left: 5px;
}
#conversejs #users .userinfo .d-flex {
margin-bottom: 2px;
}
#conversejs #users.controlbox-pane {
height: 450px;
text-align: left;
}
#conversejs #users .chatbox-btn {
margin: 0;
color: #007bff;
}
@media screen and (max-width: 575px) {
body .brand-heading {
font-size: 3.75em;
......
mockup/fullscreen-login.html
View file @ e6d56314
......@@ -22,7 +22,7 @@
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div class="col-12">
<div class="brand-heading-container col-12">
<h1 class="brand-heading">
<i class="icon-conversejs"></i> inVerse</h1>
<p>
......@@ -32,7 +32,7 @@
<div class="row">
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<form class="pure-form converse-form">
<form id="converse-login" class="pure-form converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
......@@ -41,9 +41,10 @@
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div>
<p></p>
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
<fieldset class="buttons">
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</fieldset>
</form>
</div>
</div>
......
mockup/index.html
View file @ e6d56314
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>inVerse Mockups</title>
<meta http-equiv="refresh" content="0; URL=login.php">
<title>Converse.js Live Mockup</title>
<meta name="description" content="Converse.js: A chat client for your website" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
</head>
<body>
</body>
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Mockups</h2>
</header>
</div>
</html>
\ No newline at end of file
<ul>
<li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul>
</body>
</html>
mockup/less/mockup.less
View file @ e6d56314
// 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; }
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
}
......@@ -21,74 +19,7 @@ body {
.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;
......@@ -113,16 +44,6 @@ body {
.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 {
......@@ -175,9 +96,6 @@ body {
}
}
@media screen and (max-width: 575px) {
body {
.brand-heading { font-size:3.75em; }
......@@ -272,5 +190,3 @@ body {
@media screen and (max-width: 480px) {
#conversejs { width:auto; }
}
mockup/menu.html deleted 100644 → 0
View file @ 90035a3c
<div id="mockups">
<a href="login.php" class="btn btn-primary">1a</a>
<a href="login-c.php" class="btn btn-primary">1b</a>
<a href="chatbox.php" class="btn btn-primary">2</a>
<a href="chatroom.php" class="btn btn-primary">3</a>
<a href="converse.php" class="btn btn-primary">4</a>
</div>
mockup/overlayed-login.html
View file @ e6d56314
......@@ -10,8 +10,8 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body>
<div class="container converse-bg">
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
......@@ -21,15 +21,12 @@
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div class="col-12">
<h1 class="brand-heading">
<i class="icon-conversejs"></i> Converse.js</h1>
<p>
<a href="https://conversejs.org">Open Source</a><br />XMPP chat client</p>
<div class="brand-heading-container col-12">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div>
<div class="col-12">
<form class="pure-form converse-form">
<form id="converse-login" class="pure-form converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
......
mockup/sidebar.js
View file @ e6d56314
......@@ -18,7 +18,7 @@ const Sidebar = Backbone.NativeView.extend({
hamburger.classList.remove('fa-times');
hamburger.classList.remove('fa-bars');
} else {
converse_el.addClass('sidebar-open');
converse_el.classList.add('sidebar-open');
hamburger.classList.remove('fa-bars');
hamburger.classList.add('fa-times');
}
......
mockup/user-panel.html
View file @ e6d56314
This diff is collapsed.
package-lock.json
View file @ e6d56314
......@@ -7516,6 +7516,10 @@
"integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
"dev": true
},
"snabbdom": {
"version": "github:jcbrand/snabbdom#3ed3a2a1a8b98eab19021d6988f3f4af25b606c8",
"dev": true
},
"snyk": {
"version": "1.69.1",
"resolved": "https://registry.npmjs.org/snyk/-/snyk-1.69.1.tgz",
......
sass/_chatbox.scss
View file @ e6d56314
......@@ -157,15 +157,22 @@
font-style: italic;
}
.chat-message {
overflow: auto; // Ensures that content stays inside
margin: 0.3em;
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
overflow: auto; // Ensures that content stays inside
canvas {
vertical-align: middle;
background: $gray-color;
}
.chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden;
}
......@@ -247,11 +254,13 @@
width: 100%;
}
.chat-textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
@include border-bottom-radius($chatbox-border-radius);
border: 0;
height: $chat-textarea-height;
padding: 0.5em;
width: 100%;
border: none;
resize: none;
}
.send-button {
......
sass/_chatrooms.scss
View file @ e6d56314
......@@ -69,7 +69,8 @@
border-top: 0;
width: 100%;
.chat-info {
color: $chatroom-head-color;
color: white;
line-height: normal;
}
.mentioned {
font-weight: bold;
......@@ -81,6 +82,14 @@
}
.chat-msg-them {
color: $chatroom-message-them-color;
canvas {
background: $red;
}
}
.chat-msg-me {
canvas {
background: $light-blue;
}
}
}
.disconnect-msg {
......@@ -89,7 +98,7 @@
.chat-area {
word-wrap: break-word;
height: 100%;
width: 70%;
width: 100%;
float: left;
min-width: $chat-width;
.new-msgs-indicator {
......@@ -97,8 +106,7 @@
max-width: 70%;
}
.chat-content {
// There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
padding: 0 0.5em 0 0.5em;
padding: 0.5em;
}
&.full {
min-width: 100%;
......@@ -125,6 +133,14 @@
.chatroom-features {
bottom: 0.5em;
width: 100%;
.feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help;
}
}
.awesomplete {
ul {
......
sass/_controlbox.scss
View file @ e6d56314
#conversejs {
#controlbox {
.pure-form.converse-form {
padding: 0;
}
margin-right: 2*$chat-gutter;
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
}
.pure-form.converse-form {
padding: 0;
}
.controlbox-head {
background-color: $controlbox-head-color;
border-top-left-radius: $chatbox-border-radius;
......@@ -129,14 +132,20 @@
.brand-heading-container {
.brand-heading {
text-align: left;
font-size: 150%;
text-align: center;
}
.brand-name {
font-size: 120%;
}
}
#login-dialog {
.brand-heading {
color: $global-background-color;
}
}
.toggle-register-login {
font-weight: bold;
}
......@@ -150,6 +159,9 @@
}
#converse-register, #converse-login {
fieldset.buttons {
text-align: center;
}
.login-anon {
height: auto;
white-space: normal;
......@@ -168,13 +180,41 @@
}
}
#users {
overflow-y: hidden;
position: relative;
.add-converse-contact {
margin: 0 0 0.75em 0;
}
.chatbox-btn {
margin: 0;
}
}
#chatrooms, #contacts {
margin-top: 0.75em;
}
#users {
.userinfo {
padding-bottom: 1em;
border-bottom: 1px solid $gray-color;
.username {
margin-left: 0.5em;
}
.d-flex {
margin-bottom: 0.2em;
}
}
}
#chatrooms {
border-bottom: 1px solid $gray-color;
form.add-chatroom {
input[type=button],
input[type=submit],
......@@ -184,9 +224,8 @@
margin: 0;
padding: 0;
}
.rooms-list-container {
text-align: left;
margin: 0;
.rooms-toggle {
display: block;
color: $text-color;
......@@ -195,7 +234,7 @@
color: $dark-gray-color;
}
}
dl.rooms-list {
.rooms-list {
margin: 0.5em 0;
text-align: left;
dt {
......@@ -214,7 +253,7 @@
color: $text-color;
display: block;
overflow: hidden;
padding: 0.3em 0;
padding: 0.2em 0;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
a:hover {
......@@ -464,10 +503,13 @@
font-size: $font-size;
position: absolute;
left: 0;
text-align: center;
text-align: left;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border-radius: $chatbox-border-radius;
.switch-form {
padding-bottom: 2em;
p {
......@@ -478,7 +520,6 @@
font-size: $font-size;
font-weight: bold;
height: auto;
margin: 4px;
}
dd {
margin-left: 0;
......@@ -489,10 +530,6 @@
}
}
#users {
overflow-y: hidden;
}
.add-xmpp-contact {
padding: 1em 0.5em;
input {
......@@ -545,4 +582,19 @@
color: $inverse-link-color;
}
}
.xmpp-status, .xmpp-status-menu {
.online {
color: $green;
}
.dnd {
color: $red
}
.away {
color: $light-blue;
}
.logout, .offline {
color: $gray-color;
}
}
}
sass/_core.scss
View file @ e6d56314
......@@ -6,6 +6,24 @@
@include animation-timing-function(ease);
}
// FIXME: these need to go elsewhere, they're outside of #conversejs
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
#converse-embedded-chat,
#conversejs {
bottom: 0;
......@@ -44,10 +62,6 @@
color: $subdued-color;
}
.circle {
border-radius: 50%;
}
::selection {
background-color: $highlight-color;
}
......@@ -55,6 +69,62 @@
background-color: $highlight-color;
}
canvas {
background:#000;
border-radius:4px;
margin: 2px 0;
}
.circle {
border-radius: 50%;
}
.sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: $controlbox-head-color;
text-align: center;
.chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em;
&.fa-vcard {
margin-top: 1em;
}
}
.bottom {
position: absolute;
bottom: 1em;
}
}
.badge {
padding: 0.25em 0.4em;
line-height: 1;
}
.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;
}
.list-container {
text-align: left;
margin: 0.3em 0;
}
.btn.btn-primary {
color: #fff;
}
.no-text-select {
-webkit-touch-callout: none;
@include user-select(none);
......@@ -255,7 +325,6 @@
min-width: 50%;
}
label {
margin: 1em 0;
font-size: $font-size-large;
}
input[type=text],
......
sass/_roster.scss
View file @ e6d56314
......@@ -2,17 +2,20 @@
text-align: left;
width: 100%;
position: relative;
margin: 1em 0 0 0;
margin: 0;
height: $roster-height;
height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
overflow: hidden;
padding: 0;
padding-bottom: 3em;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
border-bottom: 1px solid $gray-color;
padding: 0 0 2em 0;
overflow: scroll;
&.no-contact-requests {
height: calc(100% - #{$controlbox-dropdown-height} - 20px);
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
}
// XXX: FIXME
height: calc(100% - 70px);
/* Custom addition for CSP */
#online-count {
display: none;
......@@ -27,24 +30,30 @@
}
.roster-filter-form {
margin: 0 0 0.5em 0;
margin: 0.2em 0 0;
width: 100%;
span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer;
}
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
margin: 0.2em 0.2em 0.2em 0;
width: 60%;
}
/* (jQ addClass:) if input has value: */
/* (dynamically added) if input has value: */
.roster-filter.x {
background-position: right 3px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
/* (dynamically added) if mouse is over the 'x' input area*/
.roster-filter.onX {
cursor: pointer;
}
......@@ -79,15 +88,18 @@
.roster-contacts {
padding: 0;
margin: 0;
margin: 0.2em 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
.roster-group {
border: none;
color: $text-color;
font-weight: normal;
text-shadow: 0 1px 0 $text-shadow-color;
margin: 1em 0 0 0;
.group-toggle {
&:hover {
color: $dark-gray-color;
......@@ -95,8 +107,8 @@
color: $text-color;
display: block;
width: 100%;
margin: 0.5em 0;;
}
li {
border: none;
clear: both;
......@@ -106,10 +118,31 @@
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0;
width: 100%;
&.requesting-xmpp-contact {
a {
width: 2em;
}
:not(.open-chat) {
margin-top: 0.5em;
}
.request-actions {
padding: 0 0 0 0.3em;
float: right;
}
.open-chat {
max-width: 70%;
.req-contact-name {
width: 100%;
}
}
.req-contact-name {
width: 69%;
padding: 0;
}
}
a:hover {
color: $dark-link-color;
......@@ -154,23 +187,6 @@
height: $roster-item-height;
}
}
&.requesting-xmpp-contact {
.request-actions {
padding: 0 0 0 0.3em;
float: right;
}
.open-chat {
max-width: 70%;
.req-contact-name {
width: 100%;
}
}
.req-contact-name {
line-height: $line-height;
width: 69%;
padding: 0;
}
}
&.current-xmpp-contact span {
font-size: $font-size;
float: left;
......@@ -200,6 +216,7 @@
margin: 0;
padding: 0;
color: $subdued-color;
width: 2em;
&:before {
font-size: $font-size;
}
......
sass/converse/_controlbox.scss
View file @ e6d56314
......@@ -15,7 +15,8 @@
.brand-heading-container {
.brand-heading {
margin-left: 1em;
font-size: 2.2em;
margin: 1em 0;
}
}
}
......
sass/converse/_minimized_chats.scss
View file @ e6d56314
......@@ -10,6 +10,13 @@
padding: 0;
width: 130px;
.badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid $gray-color;
}
#toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
......
sass/inverse/_controlbox.scss
View file @ e6d56314
......@@ -12,7 +12,7 @@
.brand-heading-container {
text-align: center;
.brand-heading {
text-align: center;
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
......@@ -63,7 +63,7 @@
}
#converse-register, #converse-login {
margin: 2em 30% 3em 30%;
.title, .instructions, label {
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
......
sass/inverse/_core.scss
View file @ e6d56314
body {
width: 100%;
height: 100%;
height: 100vh;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: $global-background-color;
......
src/templates/inverse_brand_heading.html
View file @ e6d56314
<span class="brand-heading-container">
<span class="container brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
......
src/templates/room_panel.html
View file @ e6d56314
<form class="add-chatroom"></form>
<div class="rooms-list-container">
<div class="list-container rooms-list-container">
<dl id="available-chatrooms" class="rooms-list"></dl>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7