CSS/HTML: Nicer styling of branding on the login page
This commit is contained in:
JC Brand
parent
4f8cb48fb3
commit
1eb00d3e5d
@ -9566,8 +9566,9 @@ body.converse-fullscreen {
|
||||
margin-bottom: 2em;
|
||||
margin-left: -2.7em;
|
||||
word-spacing: 5px; }
|
||||
#conversejs-bg .converse-brand__text .subdued {
|
||||
opacity: 0.25; }
|
||||
|
||||
#conversejs-bg .subdued, #conversejs .subdued {
|
||||
opacity: 0.35; }
|
||||
|
||||
#conversejs {
|
||||
bottom: 0;
|
||||
@ -9594,15 +9595,34 @@ body.converse-fullscreen {
|
||||
#conversejs .brand-heading-container {
|
||||
text-align: center; }
|
||||
#conversejs .brand-heading {
|
||||
font-size: 200%;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
font-family: var(--branding-font);
|
||||
color: var(--link-color); }
|
||||
color: var(--link-color);
|
||||
margin-bottom: 1em; }
|
||||
#conversejs .brand-heading .brand-name {
|
||||
color: var(--link-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -0.5em; }
|
||||
#conversejs .brand-heading .brand-name__text {
|
||||
font-size: 120%;
|
||||
vertical-align: text-bottom; }
|
||||
#conversejs .brand-heading .byline {
|
||||
margin: 0;
|
||||
font-family: var(--heading-font);
|
||||
font-size: 0.25em;
|
||||
opacity: 0.55;
|
||||
margin-left: -4em;
|
||||
word-spacing: 5px;
|
||||
margin-top: -15px; }
|
||||
#conversejs .brand-heading .converse-svg-logo {
|
||||
height: 1.2em;
|
||||
color: var(--link-color);
|
||||
height: 1.5em;
|
||||
margin-right: 0.25em;
|
||||
margin-bottom: -0.3em; }
|
||||
margin-bottom: -0.25em; }
|
||||
#conversejs .brand-heading .converse-svg-logo .cls-1 {
|
||||
isolation: isolate; }
|
||||
#conversejs .brand-heading .converse-svg-logo .cls-2 {
|
||||
@ -10063,7 +10083,7 @@ body.converse-fullscreen {
|
||||
|
||||
#conversejs form.converse-form {
|
||||
background: white;
|
||||
padding: 1.5em; }
|
||||
padding: 1.2rem; }
|
||||
#conversejs form.converse-form legend {
|
||||
color: var(--text-color);
|
||||
font-size: 125%;
|
||||
@ -10786,10 +10806,6 @@ body.converse-fullscreen {
|
||||
padding-bottom: 1em; }
|
||||
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
|
||||
font-weight: bold; }
|
||||
#conversejs #controlbox .brand-heading-container .brand-heading {
|
||||
text-align: center; }
|
||||
#conversejs #controlbox .brand-heading-container .brand-name {
|
||||
font-size: 120%; }
|
||||
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0; }
|
||||
@ -11009,12 +11025,11 @@ body.converse-fullscreen {
|
||||
#conversejs.converse-mobile #controlbox .brand-heading-container {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1em;
|
||||
text-align: center; }
|
||||
margin-top: 5em;
|
||||
margin-bottom: 1em; }
|
||||
#conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading,
|
||||
#conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading {
|
||||
font-size: 150%;
|
||||
font-size: 600%;
|
||||
font-size: 500%;
|
||||
padding: 0.7em 0 0 0;
|
||||
opacity: 0.8;
|
||||
color: var(--brand-heading-color); }
|
||||
@ -11133,9 +11148,15 @@ body.converse-fullscreen {
|
||||
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
|
||||
display: none; }
|
||||
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
|
||||
display: block; }
|
||||
#conversejs.converse-overlayed .converse-chatboxes .chatbox .box-flyout {
|
||||
margin-left: 30px; } }
|
||||
display: block; } }
|
||||
|
||||
#conversejs.converse-overlayed .brand-heading {
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 0.8rem;
|
||||
width: 100%; }
|
||||
|
||||
#conversejs.converse-overlayed .converse-svg-logo {
|
||||
height: 1em; }
|
||||
|
||||
#conversejs #converse-modals .set-xmpp-status {
|
||||
margin: 1em; }
|
||||
|
||||
4
dist/converse.js
vendored
4
dist/converse.js
vendored
@ -93077,7 +93077,7 @@ return __p
|
||||
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
|
||||
module.exports = function(o) {
|
||||
var __t, __p = '';
|
||||
__p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n <div class="brand-heading">\n <a href="https://conversejs.org" target="_blank" rel="noopener">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">converse</span>\n </a>\n </div>\n</span>\n';
|
||||
__p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">\n <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n </span>\n </a>\n</span>\n';
|
||||
return __p
|
||||
};
|
||||
|
||||
@ -93624,7 +93624,7 @@ return __p
|
||||
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
|
||||
module.exports = function(o) {
|
||||
var __t, __p = '', __e = _.escape;
|
||||
__p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n <div class="container brand-heading-container">\n <h1 class="brand-heading brand-heading--inverse">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">converse</span>\n </h1>\n <p class="brand-subtitle">' +
|
||||
__p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n <div class="container brand-heading-container">\n <h1 class="brand-heading brand-heading--inverse">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">\n <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n <p class="byline">messaging freedom</p>\n </span>\n </h1>\n <p class="brand-subtitle">' +
|
||||
__e(o.version_name) +
|
||||
'</p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>\n </div>\n</div>\n';
|
||||
return __p
|
||||
|
||||
@ -164,15 +164,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.brand-heading-container {
|
||||
.brand-heading {
|
||||
text-align: center;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
#converse-login-panel, #converse-register-panel {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@ -486,11 +477,10 @@
|
||||
|
||||
.brand-heading-container {
|
||||
@include make-col(12);
|
||||
margin-top: 5em;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
.brand-heading {
|
||||
font-size: 150%;
|
||||
font-size: 600%;
|
||||
font-size: 500%;
|
||||
padding: 0.7em 0 0 0;
|
||||
opacity: 0.8;
|
||||
color: var(--brand-heading-color);
|
||||
@ -605,14 +595,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#conversejs.converse-overlayed {
|
||||
.converse-chatboxes {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
margin-left: 30px; // Counteracts Bootstrap margins, but
|
||||
// not clear why needed...
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#conversejs.converse-overlayed {
|
||||
.brand-heading {
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
.converse-svg-logo {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,9 +75,12 @@ body.converse-fullscreen {
|
||||
margin-left: -2.7em;
|
||||
word-spacing: 5px;
|
||||
}
|
||||
.subdued {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#conversejs-bg, #conversejs {
|
||||
.subdued {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,16 +126,41 @@ body.converse-fullscreen {
|
||||
}
|
||||
|
||||
.brand-heading {
|
||||
font-size: 200%;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
font-family: var(--branding-font);
|
||||
color: var(--link-color);
|
||||
margin-bottom: 1em;
|
||||
|
||||
.brand-name {
|
||||
color: var(--link-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
.brand-name__text {
|
||||
font-size: 120%;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.byline {
|
||||
margin: 0;
|
||||
font-family: var(--heading-font);
|
||||
font-size: 0.25em;
|
||||
opacity: 0.55;
|
||||
margin-left: -4em;
|
||||
word-spacing: 5px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.converse-svg-logo {
|
||||
height: 1.2em;
|
||||
color: var(--link-color);
|
||||
height: 1.5em;
|
||||
margin-right: 0.25em;
|
||||
margin-bottom: -0.3em;
|
||||
margin-bottom: -0.25em;
|
||||
.cls-1 {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
&.converse-form {
|
||||
background: white;
|
||||
padding: 1.5em;
|
||||
padding: 1.2rem;
|
||||
legend {
|
||||
color: var(--text-color);
|
||||
font-size: 125%;
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<span class="brand-heading-container">
|
||||
<div class="brand-heading">
|
||||
<a href="https://conversejs.org" target="_blank" rel="noopener">
|
||||
<svg class="converse-svg-logo"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 364 364">
|
||||
<title>Converse</title>
|
||||
<g class="cls-1" id="g904">
|
||||
<g data-name="Layer 2">
|
||||
<g data-name="Layer 7">
|
||||
<path
|
||||
class="cls-3"
|
||||
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
|
||||
<path
|
||||
class="cls-4"
|
||||
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
|
||||
</g>
|
||||
<a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">
|
||||
<svg class="converse-svg-logo"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 364 364">
|
||||
<title>Converse</title>
|
||||
<g class="cls-1" id="g904">
|
||||
<g data-name="Layer 2">
|
||||
<g data-name="Layer 7">
|
||||
<path
|
||||
class="cls-3"
|
||||
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
|
||||
<path
|
||||
class="cls-4"
|
||||
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="brand-name">converse</span>
|
||||
</a>
|
||||
</div>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="brand-name">
|
||||
<span class="brand-name__text">converse<span class="subdued">.js</span></span>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@ -20,7 +20,10 @@
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="brand-name">converse</span>
|
||||
<span class="brand-name">
|
||||
<span class="brand-name__text">converse<span class="subdued">.js</span></span>
|
||||
<p class="byline">messaging freedom</p>
|
||||
</span>
|
||||
</h1>
|
||||
<p class="brand-subtitle">{{{o.version_name}}}</p>
|
||||
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user