moved about and privacy to the settings page, created auth page for google apps
This commit is contained in:
Andy Chung
Родитель
5ca4d4d168
Коммит
6ee5564351
199
auth.html
199
auth.html
|
|
@ -30,10 +30,12 @@
|
|||
<script src="scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
|
||||
<style>
|
||||
html, body {
|
||||
background-image: -moz-linear-gradient(center top , #EEEEEE 0%, #DDDDDD 100%);
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
color: #0A0A0A;
|
||||
font-family: "Lucida Grande",Verdana,sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +55,183 @@
|
|||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#oauth {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: -95px;
|
||||
width: 300px;
|
||||
background-image: url("i/f1Logo.png");
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
padding: 100px 0 0 0;
|
||||
}
|
||||
|
||||
#oauth .text {
|
||||
display: block;
|
||||
margin: 0 0 7px 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 30px;
|
||||
border-width: 1px 1px 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
|
||||
-moz-border-radius: 0 2px 2px 0;
|
||||
-webkit-border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #fafafa 0%, #ddd 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ddd));
|
||||
}
|
||||
|
||||
button:active {
|
||||
-moz-box-shadow: 0 0 1px #666666 inset;
|
||||
-webkit-box-shadow: 0 0 1px #666666 inset;
|
||||
box-shadow: 0 0 1px #666666 inset;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #eee 0%, #ccc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
|
||||
}
|
||||
|
||||
input {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #888;
|
||||
font-family: "Lucida Grande", Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 3px;
|
||||
margin: 0;
|
||||
|
||||
-moz-border-radius: 2px 0 0 2px;
|
||||
-moz-box-shadow:0 3px 3px -3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
-moz-box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.25) inset, 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
input.google {
|
||||
background-image: url("i/sprite.png");
|
||||
background-position: 5px -159px;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0 0 0 26px;
|
||||
}
|
||||
|
||||
.hbox {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-align: stretch;
|
||||
|
||||
display: -moz-box;
|
||||
-moz-box-orient: horizontal;
|
||||
-moz-box-align: stretch;
|
||||
|
||||
display: box;
|
||||
box-orient: horizontal;
|
||||
box-align: stretch;
|
||||
}
|
||||
|
||||
.hbox > * {
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
box-flex: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vbox {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-align: stretch;
|
||||
|
||||
display: -moz-box;
|
||||
-moz-box-orient: vertical;
|
||||
-moz-box-align: stretch;
|
||||
|
||||
display: box;
|
||||
box-orient: vertical;
|
||||
box-align: stretch;
|
||||
}
|
||||
|
||||
.vbox > * {
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
box-flex: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
box-flex: 1;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-moz-box-direction: reverse;
|
||||
box-direction: reverse;
|
||||
}
|
||||
|
||||
.boxFlex0 {
|
||||
-webkit-box-flex: 0;
|
||||
-moz-box-flex: 0;
|
||||
box-flex: 0;
|
||||
}
|
||||
|
||||
.boxFlex1, .boxFlex {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
box-flex: 1;
|
||||
}
|
||||
|
||||
.boxFlex2 {
|
||||
-webkit-box-flex: 2;
|
||||
-moz-box-flex: 2;
|
||||
box-flex: 2;
|
||||
}
|
||||
|
||||
.boxGroup1 {
|
||||
-webkit-box-flex-group: 1;
|
||||
-moz-box-flex-group: 1;
|
||||
box-flex-group: 1;
|
||||
}
|
||||
|
||||
.boxGroup2 {
|
||||
-webkit-box-flex-group: 2;
|
||||
-moz-box-flex-group: 2;
|
||||
box-flex-group: 2;
|
||||
}
|
||||
|
||||
.start {
|
||||
-webkit-box-pack: start;
|
||||
-moz-box-pack: start;
|
||||
box-pack: start;
|
||||
}
|
||||
|
||||
.end {
|
||||
-webkit-box-pack: end;
|
||||
-moz-box-pack: end;
|
||||
box-pack: end;
|
||||
}
|
||||
|
||||
.center {
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
box-pack: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
require(["require", "jquery", "blade/url"],
|
||||
|
|
@ -91,19 +270,21 @@
|
|||
|
||||
<div id="oauth" class="authorize hidden">
|
||||
<form name="authForm" action="/api/account/authorize" method="POST">
|
||||
<input type="hidden" name="domain" id="domain" value="">
|
||||
Enter your Google Apps domain
|
||||
<input name="openid_identifier" id="openid_identifier" value="">
|
||||
<input type="hidden" name="end_point_success" value="/auth.html#oauth_success">
|
||||
<input type="hidden" name="end_point_auth_failure" value="/auth.html#oauth_failure">
|
||||
<button id='submitbtn' type="submit">send</button>
|
||||
<input type="hidden" name="domain" id="domain" value="">
|
||||
<span class="text">Enter your Google Apps domain</span>
|
||||
<div class="controls hbox">
|
||||
<input class="boxFlex google" name="openid_identifier" id="openid_identifier" value="">
|
||||
<input class="boxFlex google" type="hidden" name="end_point_success" value="/auth.html#oauth_success">
|
||||
<input class="boxFlex google" type="hidden" name="end_point_auth_failure" value="/auth.html#oauth_failure">
|
||||
<button id='submitbtn' type="submit">submit</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div style="clear: both"/>
|
||||
</div>
|
||||
|
||||
<div id='message' class="connecting"><img src="share/i/loader.gif"> connecting...</div>
|
||||
<div id='message' class="connecting"><img src="i/loader-w.gif"> connecting...</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.1 KiB |
|
|
@ -1,75 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>F1: Config</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script data-main="index.js" src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
|
||||
<title>F1: Config</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script data-main="index.js" src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="header" class="row">
|
||||
<div class="c2 logo">
|
||||
</div>
|
||||
<div class="c1">
|
||||
<h1>F1 Configuration</h1>
|
||||
</div>
|
||||
<div id="header" class="row">
|
||||
<div class="c2 logo">
|
||||
</div>
|
||||
<div class="c1">
|
||||
<h1>F1 Configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Start status messages -->
|
||||
<div id="statusError" class="status hidden error">
|
||||
We're really sorry, F1 done goofed up. <span class="message"></span>
|
||||
<button class="statusButton statusErrorButton">ok</button>
|
||||
</div>
|
||||
<!-- End status messages -->
|
||||
|
||||
<ul id="tabs" class="clearfix">
|
||||
<li class="manage selected">manage</li>
|
||||
<li class="settings">settings</li>
|
||||
</ul>
|
||||
|
||||
<div id="config">
|
||||
|
||||
<div id="manage" class="panel">
|
||||
<h1 id="existingHeader" class="hidden">My accounts</h1>
|
||||
<ul id="existing" class="hidden">
|
||||
</ul>
|
||||
|
||||
<h1 id="availableHeader" class="hidden">Add accounts</h1>
|
||||
<ul id="available" class="add hidden">
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Start status messages -->
|
||||
<div id="statusError" class="status hidden error">
|
||||
We're really sorry, F1 done goofed up. <span class="message"></span>
|
||||
<button class="statusButton statusErrorButton">ok</button>
|
||||
</div>
|
||||
<!-- End status messages -->
|
||||
|
||||
<ul id="tabs" class="clearfix">
|
||||
<li class="manage selected">manage</li>
|
||||
<li class="settings">settings</li>
|
||||
</ul>
|
||||
|
||||
<div id="config">
|
||||
|
||||
<div id="manage" class="panel">
|
||||
<h1 id="existingHeader" class="hidden">My accounts</h1>
|
||||
<ul id="existing" class="hidden">
|
||||
</ul>
|
||||
|
||||
<h1 id="availableHeader" class="hidden">Add accounts</h1>
|
||||
<ul id="available" class="add hidden">
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="settings" class="panel">
|
||||
<h1>Configure your account settings</h1>
|
||||
<ul>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="shortcut">Enable keyboard shortcuts</label>
|
||||
<input type="checkbox" id="shortcut">
|
||||
</li>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="signature">Include the F1 email signature</label>
|
||||
<input type="checkbox" id="signature">
|
||||
</li>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="bookmark" >Automatically bookmark my shared links</label>
|
||||
<input type="checkbox" id="bookmark">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="done" class="panel hbox">
|
||||
<div class="boxFlex"></div>
|
||||
<button class="close">done</button>
|
||||
</div>
|
||||
|
||||
<div id="newsFooter" class="panel">
|
||||
<span class="icon rss"></span> <a href="#">F1 gets renamed to F2!</a>
|
||||
<div id="settings" class="panel">
|
||||
<h1>Configure your account settings</h1>
|
||||
<ul>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="shortcut">Enable keyboard shortcuts</label>
|
||||
<input type="checkbox" id="shortcut">
|
||||
</li>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="signature">Include the F1 email signature</label>
|
||||
<input type="checkbox" id="signature">
|
||||
</li>
|
||||
<li class="hbox">
|
||||
<label class="option boxFlex" for="bookmark" >Automatically bookmark my shared links</label>
|
||||
<input type="checkbox" id="bookmark">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="done" class="panel hbox">
|
||||
<div class="boxFlex"></div>
|
||||
<button class="close">done</button>
|
||||
</div>
|
||||
|
||||
<div id="newsFooter" class="panel">
|
||||
<div class="hbox">
|
||||
<div class="boxFlex"><span class="icon rss"></span> <a href="#">F1 gets renamed to F2!</a></div>
|
||||
<div class="about">
|
||||
<a href="../service/privacy.html" target="_blank">privacy</a>
|
||||
<a href="../" target="_blank">about</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -77,16 +83,16 @@
|
|||
|
||||
<script id="addTemplate" type="text/template">
|
||||
<li class="hbox {isNew [}newItem{]}">
|
||||
<div class="accountType overflow boxFlex"><span class="icon {type}"></span> {name} {isNew [}<span class="new">new!</span>{]}</div>
|
||||
<button class="config auth" data-domain="{domain}">add <span class="add"></span></button>
|
||||
<div class="accountType overflow boxFlex"><span class="icon {type}"></span> {name} {isNew [}<span class="new">new!</span>{]}</div>
|
||||
<button class="config auth" data-domain="{domain}">add <span class="add"></span></button>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script id="accountTemplate" type="text/template">
|
||||
{.acct accounts[0]}
|
||||
<li class="hbox">
|
||||
<div class="accountType overflow boxFlex"><span class="icon {domainType(_)}"></span> {domainName(_)} <span class="username">({displayName})</span></div>
|
||||
<button class="config remove" data-domain="{acct.domain}" data-userid="{acct.userid}" data-username="{acct.username}">remove <span class="remove"></span></button>
|
||||
<div class="accountType overflow boxFlex"><span class="icon {domainType(_)}"></span> {domainName(_)} <span class="username">({displayName})</span></div>
|
||||
<button class="config remove" data-domain="{acct.domain}" data-userid="{acct.userid}" data-username="{acct.username}">remove <span class="remove"></span></button>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,98 +22,98 @@
|
|||
* */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #0a0a0a;
|
||||
overflow-y: scroll;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #0a0a0a;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #aaa;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #fafafa 0%, #ddd 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ddd));
|
||||
height: 24px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #aaa;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #fafafa 0%, #ddd 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #ddd));
|
||||
}
|
||||
|
||||
button:active {
|
||||
-moz-box-shadow: 0 0 1px #666666 inset;
|
||||
-webkit-box-shadow: 0 0 1px #666666 inset;
|
||||
box-shadow: 0 0 1px #666666 inset;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #eee 0%, #ccc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
|
||||
-moz-box-shadow: 0 0 1px #666666 inset;
|
||||
-webkit-box-shadow: 0 0 1px #666666 inset;
|
||||
box-shadow: 0 0 1px #666666 inset;
|
||||
|
||||
background-image: -moz-linear-gradient(center top , #eee 0%, #ccc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
|
||||
}
|
||||
|
||||
button span.remove,
|
||||
button span.add {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url("i/sprite.png");
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 0 0 5px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url("i/sprite.png");
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
button.config {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button span.remove {
|
||||
background-position: center -305px;
|
||||
background-position: center -305px;
|
||||
}
|
||||
|
||||
button span.add {
|
||||
background-position: center -339px;
|
||||
background-position: center -339px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00a0ff;
|
||||
text-decoration: none;
|
||||
color: #00a0ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 720px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 720px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -121,38 +121,38 @@ strong {
|
|||
*/
|
||||
|
||||
.c1, .c2, .c3 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
min-height: 1%;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
min-height: 1%;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 220px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
width: 460px;
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.row {
|
||||
float: left;
|
||||
margin: 10px 0;
|
||||
float: left;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.row.about {
|
||||
margin: 20px 0;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: #00A0FF;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: #00A0FF;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -160,20 +160,20 @@ h1 {
|
|||
*/
|
||||
|
||||
#header.row {
|
||||
margin: 36px 0;
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
#header.row .c3,
|
||||
#header.row .c2,
|
||||
#header.row .c1 {
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
text-align: right;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#header.row .logo {
|
||||
background-image: url("i/f1Logo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("i/f1Logo.png");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -181,29 +181,29 @@ h1 {
|
|||
*/
|
||||
|
||||
ul#tabs {
|
||||
display: block;
|
||||
margin: 10px 10px 0 10px;
|
||||
display: block;
|
||||
margin: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
ul#tabs li {
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
border-width: 1px 1px 0 1px;
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
border-width: 1px 1px 0 1px;
|
||||
border-color: #ccc;
|
||||
border-style: solid;
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
-moz-border-radius: 3px 3px 0 0;
|
||||
-webkit-border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
ul#tabs li.selected {
|
||||
background-color: #fafafa;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: #fafafa;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -211,95 +211,103 @@ ul#tabs li.selected {
|
|||
*/
|
||||
|
||||
div#config {
|
||||
border-top: 1px solid #ccc;
|
||||
margin: -1px 10px 0 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-image: -moz-linear-gradient(top, #fafafa 0%, #fff 20px);
|
||||
border-top: 1px solid #ccc;
|
||||
margin: -1px 10px 0 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-image: -moz-linear-gradient(top, #fafafa 0%, #fff 20px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
background-image: url("i/sprite.png");
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: text-bottom;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
background-image: url("i/sprite.png");
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.icon.twitter {
|
||||
background-position: center -36px;
|
||||
background-position: center -36px;
|
||||
}
|
||||
|
||||
.icon.facebook {
|
||||
background-position: center -69px;
|
||||
background-position: center -69px;
|
||||
}
|
||||
|
||||
.icon.gmail {
|
||||
background-position: center -101px;
|
||||
background-position: center -101px;
|
||||
}
|
||||
|
||||
.icon.yahoo {
|
||||
background-position: center -132px;
|
||||
background-position: center -132px;
|
||||
}
|
||||
|
||||
.icon.googleApps {
|
||||
background-position: center -165px;
|
||||
background-position: center -165px;
|
||||
}
|
||||
|
||||
.icon.rss {
|
||||
background-position: center -271px;
|
||||
margin: 0;
|
||||
background-position: center -271px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#done {
|
||||
padding: 0 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
div#config .username {
|
||||
color: #aaa;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
div#config .new {
|
||||
color: #ff5959;
|
||||
font-style: italic;
|
||||
color: #ff5959;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div#config ul {
|
||||
margin: 10px 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0 20px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fafafa;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div#config ul li {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div#config ul li .accountType {
|
||||
line-height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
div#config ul li:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
div#newsFooter {
|
||||
margin: 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0 10px;
|
||||
margin: 10px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
div#newsFooter .about {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
hbox & vbox
|
||||
*/
|
||||
|
|
@ -316,6 +324,8 @@ div#newsFooter {
|
|||
display: box;
|
||||
box-orient: horizontal;
|
||||
box-align: stretch;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hbox > * {
|
||||
|
|
@ -433,9 +443,9 @@ html[xmlns] .clearfix {
|
|||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
|
||||
.overflow {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<li class="twitterTab leftTab hidden"><a class="icon twitter" name="twitter" href="#twitter">Twitter</a></li>
|
||||
<li class="facebookTab leftTab hidden"><a class="icon facebook" name="facebook" href="#facebook">Facebook</a></li>
|
||||
<li class="gmailTab leftTab hidden"><a class="icon gmail" name="google mail" href="#gmail">Gmail</a></li>
|
||||
<li class="googleappsTab leftTab hidden"><a class="icon gmail" name="google mail" href="#googleapps">Google Apps</a></li>
|
||||
<li class="googleappsTab leftTab hidden"><a class="icon googleApps" name="google apps" href="#googleapps">Google Apps</a></li>
|
||||
<li class="yahooTab leftTab hidden"><a class="icon yahoo" name="yahoo mail" href="#yahoo">Yahoo!</a></li>
|
||||
<li class="debugTab"><a class="icon debug" name="debug" href="#debug">debug</a></li>
|
||||
<div class="user-info">
|
||||
|
|
@ -46,9 +46,8 @@
|
|||
<span class="status inactive"></span>
|
||||
</div>
|
||||
<div class="rightActions">
|
||||
<a href="../settings/" target="_blank">settings</a> /
|
||||
<a href="../service/privacy.html" target="_blank">privacy</a> /
|
||||
<a href="../" target="_blank">about</a> /
|
||||
<a href="../settings/" target="_blank" class="new">new stuff!</a>
|
||||
<a href="../settings/" target="_blank">settings</a>
|
||||
<a href="http://feedback.mozillalabs.com/forums/68185-messaging-add-ons" target="_blank">feedback</a>
|
||||
<span class="close"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -179,32 +179,32 @@ ul.nav li a.icon {
|
|||
}
|
||||
|
||||
ul.nav li a.icon:hover:before {
|
||||
content: "\25B2";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 14px;
|
||||
color: rgba(0,0,0,0.75);
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
z-index: 100000;
|
||||
content: "\25B2";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 14px;
|
||||
color: rgba(0,0,0,0.75);
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
ul.nav li a.icon:hover:after {
|
||||
content: attr(name);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30px;
|
||||
color: #fafafa;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
text-shadow: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
z-index: 100000;
|
||||
content: attr(name);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30px;
|
||||
color: #fafafa;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
text-shadow: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
ul.nav li a.icon.settings {
|
||||
|
|
@ -245,16 +245,19 @@ ul.nav .rightActions {
|
|||
}
|
||||
|
||||
ul.nav .rightActions a {
|
||||
/*
|
||||
padding: 0 5px 0 0;
|
||||
padding: 0 5px;
|
||||
border-right: 1px dotted #888;
|
||||
*/
|
||||
}
|
||||
|
||||
ul.nav .rightActions a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul.nav .rightActions a.new {
|
||||
color: #ff5959;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul.nav .rightActions span.close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -364,26 +367,6 @@ ul.nav li.ui-tabs-selected {
|
|||
border-color: #666;
|
||||
}
|
||||
|
||||
/*
|
||||
ul.nav li.ui-tabs-selected a.twitter {
|
||||
background-image: url("i/sprite.png");
|
||||
background-position: left -68px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
ul.nav li.ui-tabs-selected a.facebook {
|
||||
background-image: url("i/sprite.png");
|
||||
background-position: left -140px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
ul.nav li.ui-tabs-selected a.gmail {
|
||||
background-image: url("i/sprite.png");
|
||||
background-position: left -212px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
*/
|
||||
|
||||
ul.nav li.ui-tabs-selected a.googleapps {
|
||||
background-image: url("i/sprite.png");
|
||||
background-position: left -284px;
|
||||
|
|
@ -467,7 +450,6 @@ div.meta {
|
|||
color: #444;
|
||||
white-space: normal;
|
||||
font-size: 9px;
|
||||
/* max-height: 22px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -497,7 +479,7 @@ button.share:focus {
|
|||
|
||||
/* Disable user resizing of text area since it covers the twitter count. */
|
||||
textarea {
|
||||
resize: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea, input[type="text"] {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче