Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 45e8052cda
Fetching contributors…

Cannot retrieve contributors at this time

231 lines (182 sloc) 6.744 kB
/*****************************************************************************
MACROS
*****************************************************************************/
.linearGradient(@color1:#ccc, @color2:#ddd) {
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, @color1), color-stop(100%, @color2));
background-image:-moz-linear-gradient(center bottom, @color1 0, @color2 100%);
background-image:-o-linear-gradient(center bottom, @color1 0, @color2 100%);
background-image:linear-gradient(center bottom, @color1 0, @color2 100%);
background-color: @color1;
}
.fixed(@top:0, @left:0, @height:100%, @width:100%) {
position: fixed;
top: @top; left: @left; height: @height; width: @width;
}
/*****************************************************************************
CONSTANTS
*****************************************************************************/
@mainIndent: 2%;
@storyIndent: 1em;
@contentTop: 0.3em;
@contentPanelHeight: 4em;
@contentWidth: 90%;
@contentDiminishedWidth: 40%;
@commentsWidth: 60%;
@tableBG: #F6F6EF;
/*****************************************************************************
GENERAL
*****************************************************************************/
* { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 1em; }
a,a:visited { color: black; text-decoration: none; }
td { padding: 0 0.2em; }
.loginStatus { display: block; }
.error { color: red; display: none; }
.success { color: green; display: none; }
.pending { display: none; }
.notAttempted { display: block; }
.pseudolink, .toggle span { color: black; text-decoration: underline; cursor: pointer; }
.toggle + * { display: none; }
/*****************************************************************************
GENERAL CONTROLS
*****************************************************************************/
.reload { background: #f9b; width: 3em; padding: 0.2em 0.6em; border-radius: 0.5em;
text-decoration: none; cursor: pointer; }
/*****************************************************************************
PAGE STRUCTURE
*****************************************************************************/
html, body { height: 100%; }
#container { position: relative; min-height: 100%; }
body { font-size:100%; }
#header { line-height: 1.3em; }
#header { background: #fe761b; margin: 0 0 1em; padding: 1em @mainIndent 0.5em; }
#header .wrapper { margin-left: @storyIndent; }
h1 { font-family: Neuton, ariel, helvetica, sans-serif; font-size: 2em; }
#about { font-size: 0.75em; }
#main { text-align: center; }
#main > * {
text-align: left; width: 100%-2*@mainIndent; margin: 0 auto 1em;
margin-bottom: 2em;
}
#footer {
width: 100%-2*@mainIndent; margin: 1em auto; text-align: right; font-size: small;
position: absolute; bottom: 1em;
a { text-decoration: underline; }
}
/*****************************************************************************
SETTINGS
*****************************************************************************/
#settings { padding-left: @storyIndent; }
#settings input { width: 10em; }
#settings button { padding: 0 1em; }
#settings .nav { margin-right: 2em; float: right; display: none; } /* disabled as API not responding */
/*****************************************************************************
STORIES
*****************************************************************************/
/* Chrome border bug right now */
tr, td { border-width: 0 !important; }
tr:nth-child(2n) { background: 0.9 * @tableBG; }
#stories .timedout {
display: none; padding-top: 1em;
p { margin-top: 0.5em; }
a { text-decoration: underline; }
}
#stories {
background: @tableBG;
border-collapse: collapse;
margin-bottom: 3em;
}
.story {
border: 1px solid black;
border-bottom-width: 0; &:last-child { border-bottom-width: 1px; }
cursor: pointer;
&:hover { .linearGradient(#fff4cc, #fff066); }
&.selected { background-color: red; }
-webkit-transition: all 0.2s ease-in-out;
.title { font-size: 1.5em; }
.url {
padding: 0.2em @storyIndent;
}
.commentsLink,.commentsLink:visited {
width: 1px;
text-align: right;
white-space: pre;
color: #666;
&:hover span { border-bottom: 1px dotted black; cursor: pointer; }
}
.postedAgo { white-space: pre; }
/* .url a:hover, .postedBy:hover, .commentsLink:hover span { text-decoration: underline; } */
}
.readLaterStatus {
width: 5em;
overflow: hidden;
opacity: 0.3; &:hover { opacity: 1; }
span {
background: #ccc;
text-align: center;
float: left;
width: 70%;
font-size: 0.7m; color: #666;
border: 1px solid #999; border-radius: 0.5em;
padding: 0 0.5em;
&:hover { background: #999; color: white; }
white-space: pre;
}
.success { background: #bbb; }
}
.instapaperActive .readLaterStatus {
opacity: 1;
}
/*****************************************************************************
CONTENT AND COMMENTS
*****************************************************************************/
#content, #contentPanel {
.fixed(0, 100%, 100%, @contentWidth);
-webkit-transition: left 0.3s ease-in-out;
}
#content { background: white; }
#content { .fixed(@contentTop+@contentPanelHeight, 100%, 100%, @contentWidth); }
#contentPanel { .linearGradient(#ddd, #fff); }
#contentPanel { .fixed(@contentTop, 100%, @contentPanelHeight, @contentWidth); }
#content[src^=http], #content[src^=http] + #contentPanel {
left: 100-@contentWidth;
-webkit-box-shadow: 0px 0px 20px #000;
}
#content.diminished, #content.diminished + #contentPanel {
.fixed(@contentTop, 100-@contentDiminishedWidth,
@contentPanelHeight, @contentWidth);
-webkit-transition: left 0.3s ease-in-out;
background: white;
}
#comments {
.fixed(65px, 100%, 100%, @commentsWidth);
-webkit-transition: left 0.3s ease-in-out;
background-color: white;
}
#comments[src^=http] {
left: 100-@commentsWidth;
-webkit-box-shadow: 0px 0px 20px #000;
}
/*****************************************************************************
CONTENT PANEL
*****************************************************************************/
.storyMain {
padding: 0.4em;
.title { font-size: 1.5em; }
#twitter { padding: 0.5em; }
}
.postAuxiliary { font-size: 0.7em; display: block; }
.navControls { float: right; margin: 0.5em 1em }
#simplifiedWrapper { margin-bottom: 0.2em; }
#contentPanel .commentsLink { display: block; }
#contentPanel .commentsOn { display: none; }
#twitter { background: #ddd; }
.close {
float: right;
margin: 0.3em 0.3em;
background: #ccc;
font-size: 1.8em;
border: 1px solid #aaa;
cursor: pointer;
-webkit-box-shadow: 0px 0px 5px #000;
}
Jump to Line
Something went wrong with that request. Please try again.