[ux] full buttons refactor
This commit is contained in:
karolinaszczur
parent
db2372f128
commit
f5c0dc56c7
|
|
@ -13,7 +13,7 @@ exports.pages = {};
|
|||
exports.body = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="reconnect">Reconnect</button></aside></div><header id="calls"></header><div id="wrapper"><aside id="menu"><nav class="main"><li><a href="/logout" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><main id="pages"></main></div></body>');
|
||||
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><header id="calls"></header><div id="wrapper"><aside id="menu"><nav class="main"><li><a href="/logout" class="button secondary">Logout</a></li><li><a href="/" class="button secondary"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><main id="pages"></main></div></body>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -78,7 +78,7 @@ exports.includes.contactListItemResource = function anonymous(locals) {
|
|||
exports.includes.contactRequest = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<li><span class="jid"></span><button class="approve">Approve</button><button class="deny">Deny</button></li>');
|
||||
buf.push('<li><span class="jid"></span><button class="primary approve">Approve</button><button class="secondary deny">Deny</button></li>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -178,7 +178,7 @@ exports.misc.growlMessage = function anonymous(locals) {
|
|||
exports.pages.chat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="primary small call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -187,7 +187,7 @@ exports.pages.chat = function anonymous(locals) {
|
|||
exports.pages.groupchat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><button class="joinRoom">Join</button><button class="leaveRoom">Leave</button></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -196,7 +196,7 @@ exports.pages.groupchat = function anonymous(locals) {
|
|||
exports.pages.main = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="installFirefox">Install app</button></div></section>');
|
||||
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
@ -205,7 +205,7 @@ exports.pages.main = function anonymous(locals) {
|
|||
exports.pages.signin = function anonymous(locals) {
|
||||
var buf = [];
|
||||
with (locals || {}) {
|
||||
buf.push('<section class="page signin"><div id="loginForm"><form><label>JID:<input type="text" id="jid" placeholder="you@aweso.me"/></label><label>Password:<input type="password" id="password"/></label><label>WebSocket URL:<input type="text" id="wsURL" placeholder="wss://aweso.me:5281/xmpp-websocket"/></label><input type="submit" value="Connect"/></form></div></section>');
|
||||
buf.push('<section class="page signin"><div id="loginForm"><form><label>JID:<input type="text" id="jid" placeholder="you@aweso.me"/></label><label>Password:<input type="password" id="password"/></label><label>WebSocket URL:<input type="text" id="wsURL" placeholder="wss://aweso.me:5281/xmpp-websocket"/></label><input type="submit" value="Connect" class="button primary"/></form></div></section>');
|
||||
}
|
||||
return buf.join("");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ body
|
|||
p
|
||||
| You're currently
|
||||
strong disconnected
|
||||
button.reconnect Reconnect
|
||||
button.primary.reconnect Reconnect
|
||||
header#calls
|
||||
#wrapper
|
||||
aside#menu
|
||||
nav.main
|
||||
li
|
||||
a(href="/logout", class="button") Logout
|
||||
a(href="/logout", class="button secondary") Logout
|
||||
li
|
||||
a(href="/", class="button")
|
||||
a(href="/", class="button secondary")
|
||||
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
|
||||
g(transform='scale(0.4)')
|
||||
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
li
|
||||
span.jid
|
||||
button.approve Approve
|
||||
button.deny Deny
|
||||
button.primary.approve Approve
|
||||
button.secondary.deny Deny
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</header>
|
||||
<section class="box connect">
|
||||
<h2>Connecting...</h2>
|
||||
<a class="button" href="/logout">Cancel</a>
|
||||
<a class="button secondary" href="/logout">Cancel</a>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,15 @@ section.page.chat
|
|||
img.avatar
|
||||
h1.name
|
||||
.tzo
|
||||
button.call call
|
||||
button.primary.small.call call
|
||||
.activeCall
|
||||
video.remote(autoplay)
|
||||
video.local(autoplay, muted)
|
||||
aside.buttons
|
||||
button.end End
|
||||
button.mute Mute
|
||||
button.unmute Unmute
|
||||
aside.button-wrap
|
||||
button.end.primary End
|
||||
.button-group.outlined
|
||||
button.mute Mute
|
||||
button.unmute Unmute
|
||||
ul.messages.scroll-container
|
||||
.chatBox
|
||||
form
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ section.page.chat
|
|||
header
|
||||
img.avatar
|
||||
h1.name
|
||||
button.joinRoom Join
|
||||
button.leaveRoom Leave
|
||||
button.primary.joinRoom Join
|
||||
button.secondary.leaveRoom Leave
|
||||
ul.messages
|
||||
.chatBox
|
||||
form
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@ section.page.main
|
|||
div
|
||||
h3 Desktop Integration
|
||||
button.enableAlerts Enable alerts
|
||||
button.installFirefox Install app
|
||||
button.primary.installFirefox Install app
|
||||
|
|
|
|||
|
|
@ -7,4 +7,4 @@ section.page.signin
|
|||
input(type="password", id="password")
|
||||
label WebSocket URL:
|
||||
input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
|
||||
input(type="submit", value="Connect")
|
||||
input(type="submit", value="Connect", class="button primary")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
// Buttons
|
||||
|
||||
button
|
||||
border: none
|
||||
|
||||
.button
|
||||
line-height: 35px
|
||||
|
||||
.button, button
|
||||
display: inline-block
|
||||
border-radius: 3px
|
||||
padding: 0 15px
|
||||
height: 35px
|
||||
background: $gray-lighter
|
||||
font-size: $font-size-small
|
||||
font-weight: $font-weight-bold
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
color: $gray-light
|
||||
text-overflow: ellipsis
|
||||
vertical-align: middle
|
||||
user-select()
|
||||
|
||||
&:hover:not(:disabled)
|
||||
color: $gray
|
||||
background: darken($gray-lighter, 10%)
|
||||
transition: all .3s ease-in
|
||||
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
color: lighten($gray-light, 40%)
|
||||
|
||||
&.small
|
||||
height: 25px
|
||||
padding: 0 8px
|
||||
font-size: $font-size-small
|
||||
line-height: 25px
|
||||
|
||||
&.large
|
||||
height: 50px
|
||||
line-height: 50px
|
||||
padding: 0 30px
|
||||
font-size: $font-size-large
|
||||
|
||||
&.primary, &.secondary, &.primary:hover, &.secondary:hover
|
||||
color: white
|
||||
|
||||
&.primary
|
||||
background: $pink
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background: darken($pink, 10%)
|
||||
|
||||
&:disabled
|
||||
background: $pink-light
|
||||
|
||||
&.secondary
|
||||
background: $blue
|
||||
|
||||
&:disabled
|
||||
background: $blue-light
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background: darken($blue, 10%)
|
||||
|
||||
.button-group
|
||||
|
||||
.button, button
|
||||
border-radius: 0
|
||||
margin-left: -1px
|
||||
|
||||
&:first-child:only-child
|
||||
border-radius: 3px
|
||||
|
||||
&:first-child
|
||||
border-radius: 3px 0 0 3px
|
||||
|
||||
&:last-child
|
||||
border-radius: 0 3px 3px 0
|
||||
|
||||
&.outlined
|
||||
display: inline-block
|
||||
border-radius: 3px
|
||||
|
||||
button, .button
|
||||
border: 1px solid lighten($gray-light, 70%)
|
||||
|
||||
&.primary
|
||||
|
||||
button, .button
|
||||
background: $pink-lighter
|
||||
border: 1px solid $pink-light
|
||||
color: $pink
|
||||
|
||||
&:hover
|
||||
background: lighten($pink-light, 40%)
|
||||
|
||||
&.secondary
|
||||
|
||||
button, .button
|
||||
background: $blue-lighter
|
||||
border: 1px solid $blue-light
|
||||
color: $blue
|
||||
|
||||
&:hover
|
||||
background: lighten($blue-light, 40%)
|
||||
|
||||
// Specific buttons styles
|
||||
|
||||
.installFirefox, .addContact
|
||||
margin-left: 5px
|
||||
|
||||
.addContact
|
||||
margin-top: -2px
|
||||
|
|
@ -59,10 +59,7 @@
|
|||
background: $gray-lighter
|
||||
|
||||
.call
|
||||
margin-top: 10px
|
||||
height: 25px
|
||||
line-height: 25px
|
||||
min-width: 60px
|
||||
margin-top: 9px
|
||||
text-transform: capitalize
|
||||
|
||||
.activeCall
|
||||
|
|
@ -86,13 +83,13 @@
|
|||
border: 2px solid $gray-lighter
|
||||
transform(scaleX(-1))
|
||||
|
||||
.buttons
|
||||
.button-wrap
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
|
||||
button
|
||||
margin-right: 10px
|
||||
.button-group
|
||||
margin-left: 5px
|
||||
|
||||
// while on video call the parent has
|
||||
// this class so we animate the height
|
||||
|
|
|
|||
|
|
@ -37,32 +37,4 @@ label
|
|||
margin-bottom: 5px
|
||||
font-size: 13px
|
||||
font-weight: $font-weight-bold
|
||||
color: $gray
|
||||
|
||||
a.button
|
||||
line-height: 35px
|
||||
|
||||
button, a.button
|
||||
display: inline-block
|
||||
gotham()
|
||||
roundall(3px)
|
||||
border: none
|
||||
height: 35px
|
||||
min-width: 80px
|
||||
padding: 0 1em
|
||||
color: white
|
||||
background: $blue
|
||||
font-size: $font-size-small
|
||||
font-weight: $font-weight-bold
|
||||
text-decoration: none
|
||||
text-align: center
|
||||
cursor: pointer
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
&:hover
|
||||
background: darken($blue, 30%)
|
||||
|
||||
.installFirefox, .addContact
|
||||
margin-left: 5px
|
||||
color: $gray
|
||||
|
|
@ -35,12 +35,6 @@
|
|||
position: relative
|
||||
width: 150px
|
||||
|
||||
.button
|
||||
background: $blue-saturated
|
||||
|
||||
&:hover
|
||||
background: $blue-saturated-light
|
||||
|
||||
h1
|
||||
font-size: $font-size-small
|
||||
margin: 0
|
||||
|
|
|
|||
|
|
@ -271,12 +271,6 @@ h3 {
|
|||
position: relative;
|
||||
width: 150px;
|
||||
}
|
||||
#menu .main li .button {
|
||||
background: #192a47;
|
||||
}
|
||||
#menu .main li .button:hover {
|
||||
background: #34465a;
|
||||
}
|
||||
#menu h1 {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
|
|
@ -628,10 +622,7 @@ h3 {
|
|||
background: #eee;
|
||||
}
|
||||
.conversation header .call {
|
||||
margin-top: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
min-width: 60px;
|
||||
margin-top: 9px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.conversation header .activeCall {
|
||||
|
|
@ -661,13 +652,13 @@ h3 {
|
|||
-ms-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.conversation header .activeCall .buttons {
|
||||
.conversation header .activeCall .button-wrap {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.conversation header .activeCall .buttons button {
|
||||
margin-right: 10px;
|
||||
.conversation header .activeCall .button-wrap .button-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.conversation.onCall .activeCall {
|
||||
height: 400px;
|
||||
|
|
@ -961,42 +952,141 @@ label {
|
|||
font-weight: 800;
|
||||
color: #565656;
|
||||
}
|
||||
a.button {
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
.button {
|
||||
line-height: 35px;
|
||||
}
|
||||
button,
|
||||
a.button {
|
||||
.button,
|
||||
button {
|
||||
display: inline-block;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-khtml-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
padding: 0 15px;
|
||||
height: 35px;
|
||||
min-width: 80px;
|
||||
padding: 0 1em;
|
||||
color: #fff;
|
||||
background: #12acef;
|
||||
background: #eee;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: #878787;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button:focus,
|
||||
a.button:focus {
|
||||
outline: none;
|
||||
.button:hover:not(:disabled),
|
||||
button:hover:not(:disabled) {
|
||||
color: #565656;
|
||||
background: #d6d6d6;
|
||||
-webkit-transition: all 0.3s ease-in;
|
||||
-o-transition: all 0.3s ease-in;
|
||||
transition: all 0.3s ease-in;
|
||||
-moz-transition: all 0.3s ease-in;
|
||||
}
|
||||
button:hover,
|
||||
a.button:hover {
|
||||
background: #0b79a9;
|
||||
.button:disabled,
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #b7b7b7;
|
||||
}
|
||||
.button.small,
|
||||
button.small {
|
||||
height: 25px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.button.large,
|
||||
button.large {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.button.primary,
|
||||
button.primary,
|
||||
.button.secondary,
|
||||
button.secondary,
|
||||
.button.primary:hover,
|
||||
button.primary:hover,
|
||||
.button.secondary:hover,
|
||||
button.secondary:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.button.primary,
|
||||
button.primary {
|
||||
background: #ec008c;
|
||||
}
|
||||
.button.primary:hover:not(:disabled),
|
||||
button.primary:hover:not(:disabled) {
|
||||
background: #d4007e;
|
||||
}
|
||||
.button.primary:disabled,
|
||||
button.primary:disabled {
|
||||
background: #f8bee0;
|
||||
}
|
||||
.button.secondary,
|
||||
button.secondary {
|
||||
background: #12acef;
|
||||
}
|
||||
.button.secondary:disabled,
|
||||
button.secondary:disabled {
|
||||
background: #88d5f7;
|
||||
}
|
||||
.button.secondary:hover:not(:disabled),
|
||||
button.secondary:hover:not(:disabled) {
|
||||
background: #0f9bd9;
|
||||
}
|
||||
.button-group .button,
|
||||
.button-group button {
|
||||
border-radius: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.button-group .button:first-child:only-child,
|
||||
.button-group button:first-child:only-child {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.button-group .button:first-child,
|
||||
.button-group button:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.button-group .button:last-child,
|
||||
.button-group button:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.button-group.outlined {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.button-group.outlined button,
|
||||
.button-group.outlined .button {
|
||||
border: 1px solid #dbdbdb;
|
||||
}
|
||||
.button-group.outlined.primary button,
|
||||
.button-group.outlined.primary .button {
|
||||
background: #fce8f1;
|
||||
border: 1px solid #f8bee0;
|
||||
color: #ec008c;
|
||||
}
|
||||
.button-group.outlined.primary button:hover,
|
||||
.button-group.outlined.primary .button:hover {
|
||||
background: #fbd8ec;
|
||||
}
|
||||
.button-group.outlined.secondary button,
|
||||
.button-group.outlined.secondary .button {
|
||||
background: #e7f7fd;
|
||||
border: 1px solid #88d5f7;
|
||||
color: #12acef;
|
||||
}
|
||||
.button-group.outlined.secondary button:hover,
|
||||
.button-group.outlined.secondary .button:hover {
|
||||
background: #b8e6fa;
|
||||
}
|
||||
.installFirefox,
|
||||
.addContact {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.addContact {
|
||||
margin-top: -2px;
|
||||
}
|
||||
#wrapper {
|
||||
position: relative !important;
|
||||
-webkit-transition: all 1s;
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@
|
|||
@import 'app/settings'
|
||||
@import 'app/aux'
|
||||
@import 'app/forms'
|
||||
@import 'app/buttons'
|
||||
@import 'app/callbar'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
CACHE MANIFEST
|
||||
# 0.0.1 1382550861581
|
||||
# 0.0.1 1382650276075
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
|
|
|||
|
|
@ -16,14 +16,14 @@ block content
|
|||
.fieldContainer
|
||||
label(for='fieldEmail') Email
|
||||
input#fieldEmail(type='email', name="cm-trulhji-trulhji", placeholder='you@aweso.me', required)
|
||||
button(type='submit') Subscribe to updates!
|
||||
button(type='submit', class="secondary") Subscribe to updates!
|
||||
|
||||
|
||||
section#loginbox.content.box
|
||||
.head
|
||||
h2
|
||||
| Log in
|
||||
a.button(href="/oauth/login") Have an &yet account?
|
||||
a.button(href="/oauth/login", class="secondary") Have an &yet account?
|
||||
|
||||
.content
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ block content
|
|||
label(for='wsURL') WebSocket URL
|
||||
input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
|
||||
|
||||
button(type='submit', tabindex='3') Go!
|
||||
button(type='submit', tabindex='3', class="primary") Go!
|
||||
|
||||
block scripts
|
||||
script(src="/js/login.js")
|
||||
|
|
|
|||
Loading…
Reference in New Issue