Lesswrong:Stylesheet

From Lesswrongwiki
Revision as of 11:41, 18 April 2012 by Wmoore (talk | contribs) (Create stylesheet wiki page from 8c60b7361d138b26d82ee2c2bd1ae6e637bc5ec6 r2/r2/public/static/lesswrong.css)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This is the stylesheet used at http://lesswrong.com/. All content within the <pre id="stylesheet"> will be served.

#content.clear.fullwidth {
    padding: 0 15px;
    width: 920px;
}

div.comment-meta span span {
    float: none;
}
div.permamessage {
	clear: both;
}

.divide { border-right: 2px solid #D3D3D3;  }

.loginform {
    float: left;
    width: 45%;
    padding-left: 15px;
    padding-right: 15px;
}

.loginform h3 {
    margin-bottom: 0;
    margin-top: 10px;
    font-size: large;
    font-weight: bold;
    font-variant: small-caps;
    color: #404040;
}
.loginform p {
    text-align: left;
    margin-bottom: 10px;
    color: #606060;
    margin-bottom: 20px;
}
.loginform label {
    display: block;
    font-weight: bold;
    color: #606060;
}

.loginform .remember { display:inline; margin-left: 5px;  }
.loginform ul { margin: 5px; list-style: none; }
.loginform li { margin-top: 5px; }
.loginform p .btn { margin-top: 5px }
.loginform input.logtxt { width: 125px; }

.loginform input[type=text],
.loginform input[type=password] {
    width: 125px;
    border: 1px solid #A0A0A0;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px;
}

.loginform #captcha {
    width: 250px;
 }

/* cover */
.cover {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: gray;
    opacity: .7;
    filter:alpha(opacity=70); /* IE patch */
    z-index: 1000;
}

.popup {
    position: absolute;
    left: 10%;
    background-color: white;
    top: 100px;
    width: 80%;
    text-align: left;
    z-index: 1001;
    padding: 10px;
    border-color: #B2B2B2 black black #B2B2B2;
    border-style: solid;
    border-width: 1px;
}

.popup h1 {
    text-align: center;
    font-size: large;
    font-weight: normal;
    color: orangered;
}

.popup h2 {
    text-align: center;
    font-size: small;
    margin-top: 0px;
    color: black;
    font-weight: normal;
}

/* Recent articles listing */
div.inline-listing h3 {
	display: inline;
	font-size: 1em;
	margin: 0;
}
div.inline-listing span {
	margin-left: 0.5em;
}
div.inline-listing div.sitetable {
	margin-bottom: 1em;
}
div.inline-listing div.sitetable div {
    display: list-item;
    list-style: disc;
    margin-left: 15px;
}
div.inline-listing div.sitetable div.ajaxhook {
    display: none;
}
div.inline-listing a {
	text-decoration: none;
}
div.inline-listing a:hover {
	text-decoration: underline;
}

.commentreply {
    clear: both;
    margin: 10px 15px 30px 0;
}
.commentreply textarea {
    border-color: #e9e9e9;
    -webkit-box-shadow: inset 1px 1px 5px #dbdbdb;
    -moz-box-shadow: inset 1px 1px 5px #dbdbdb;
    box-shadow: inset 1px 1px 5px #dbdbdb;
    margin: 0 0 10px;
    width: 100%;
}
.commentreply .buttons {
    float: left;
}
.commentreply .buttons button, .commentreply .help-toggle button {
	background: #f0eeee; /* Old browsers */
	background: -moz-linear-gradient(top, #f0eeee 0%, #c1c1c1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0eeee), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f0eeee 0%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f0eeee 0%,#c1c1c1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #f0eeee 0%,#c1c1c1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0eeee', endColorstr='#c1c1c1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #f0eeee 0%,#c1c1c1 100%); /* W3C */
	border-color: #c6c6c6;
	color: #666666;
	cursor: pointer;
	font-weight: bold;
	padding: 5px 30px;
}
.commentreply .help-toggle button {
    margin-right: -6px;
}

.commentreply table.help {
	clear: both;
    margin: 5px 0 0 1px;
    width: 480px;
    border-collapse: collapse;
}
.commentreply .help,
.commentreply .help td,
.commentreply .help tr {
    border: 1px solid #C0C0C0;
    padding: 4px;
    margin: 0px;
}
.commentreply .help-toggle {
    float: right;
}
.commentreply .help-toggle a {
	color: #538D4D;
	font-weight: bold;
	text-decoration: none;
}

#comment-controls label {
    padding-right: 5px;
    margin-left: 1em;
}
div.comment .focal {
	background-color: #ffc;
        padding-left: 5px;
        padding-right: 5px;
}



/* Markdown */
.md { font-size: small; }
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 { color: black; float: none; }
#comments .md h2 { color: black; float: none; }
.md h2 { font-size: 16px; }
.md h3 { font-size: 15px; }
.md h4 { font-size: 14px; }
.md strong { font-weight: bold; }
.md div { margin-bottom: 1em; }
.md em, .help em { font-style: italic; }
.md strong em { font-style: italic; font-weight: bold }
.md ol, .md ul, .help ul { margin: 10px 2em; }
.md ul, .help ul { list-style: disc outside }
.md ol { list-style: decimal outside }
.md pre { margin: 10px; overflow-x: auto; }
.md blockquote, .help blockquote {
    border-left: 2px solid #369;
    padding-left: 4px;
    margin: 5px;
    margin-right: 15px;
}

/* Rules to make the editor styled properly */
.mceContentBody.md {
    padding: 0.5em;
}

h1 a, h2 a {
    color: inherit;
    text-decoration: inherit;
}

/* default form styles */
.pretty-form {
	margin-top: 10px;
  vertical-align: top;
}

.pretty-form p {margin: 3px ;}
.pretty-form input[type=checkbox],
.pretty-form input[type=radio] {margin: 2px .5em 0px .5em; }
.pretty-form img { margin: 3px .5em}
.pretty-form table {
    width: 100%;
}

.pretty-form .infobar {
    width: 285px;
    margin: 5px;
}

.pretty-form input[type=text],
.pretty-form input[type=file],
.pretty-form input[type=password],
.pretty-form select,
.pretty-form b,
.pretty-form textarea,
.pretty-form button  { margin: 3px .5em; }
.pretty-form th { text-align: right }

/*submit*/
.pretty-form.long-text input[type=text],
.pretty-form.long-text textarea,
.pretty-form.long-text input[type=password] {margin: 3px; width: 40em }

/* Image browser */
#images {
    padding: 10px;
    width: 100%;
}
.image-upload .new-image { margin-left: 20px }
.image-upload td,
.image-upload th    { vertical-align: top; }
.image-upload span  { padding-left: 5px; }
.image-upload { display: inline; }

ul#image-preview-list {
    margin: 20px 20px 20px 20px;
}
ul#image-preview-list li {
    padding-bottom: 10px;
    margin-bottom: 20px;
    vertical-align: top;
    width: 45%;
    height: 100px;
    float: left;
    position: relative;
    display: inline;
}

ul#image-preview-list .preview {
    width: 100px;
    float: left;
    display: block;
    text-align: center;
    max-height: 100px;
    overflow: hidden;
}
ul#image-preview-list .preview img {
    max-width: 100px;
    padding: auto;
}
ul#image-preview-list .description {
    vertical-align: top;
    margin-left: 105px;
}
ul#image-preview-list .description pre {
    display: inline;
    padding: 5px;
}

/* pref table - used for preferences and edit subreddit pages */
.preftable th {
    padding-top: 2px;
    font-weight: bold;
    vertical-align: top;
    text-align: right;
}
.preftable td.prefright { padding: 0;}
.preftable .spacer { margin-bottom: 5px; }
.preftable .note { width: 100%; vertical-align: top; padding-top: 2px; }
.save-button { margin-left: 5px; }

.reported { background-color: #f6e69f }
.suspicious { background-color: #f6e69f }
.spam { background-color: #FA8072 }

/* For lists of users, such as friends */
.usertable { margin-left: 10px;}
.usertable td { padding: 0 .7em }
.usertable { white-space: nowrap }
.usertable h1 { padding: 10px 0; margin: 0;}

div.sidebox select {
    width: 100px;
}
div.sidebox label {
    width: 90px;
}

/* Wiki links */
#side-wikilinks select {
    width: 136px;
}
#side-wikilinks input[type=submit] {
    width: 45px;
    margin-left: 2px;
}
div#side-wikilinks {
    padding-bottom: 10px;
}

/* Message bar at the top of the page */
.infobar {
    background-color: #f7f7f8;
    padding: 5px;
    margin: 10px 0;
    border: 1px solid rgb(83, 141, 77);
    font-size: small;
}

.infobar p {
    margin: 0;
}

.sitetable {
    clear: both;
}

.error {
    color: red;
    margin: 5px;
}



div.comment div.parent {
	padding-left: 5px;
}

/* Login form in sidebar */
#remember-me input {
    margin-left: 0;
    width: auto;
    border: none;
}
#side-login #recover {
    float: right;
    margin: 2px 0;
}
#side-login button {
    float: left;
}
#side-login .error, #comments .error {
    margin-left: 0;
}


/* About box */
#side-about a {
    font-size: larger;
    text-decoration: underline;
}

/* Subreddit box */
#subreddit-info form {
  display: inline;
}

/* Categories page */
.sr-toggle-button {
    width: 54px;
    height: 18px;
    margin-bottom: 5px;
    cursor: pointer;
}
.sr-toggle-button.add { background-image: url(/static/sr-add-button.png) }
.sr-toggle-button.remove { background-image: url(/static/sr-remove-button.png)}

/* Draft marker on post title */
#content span.draft {
  color: red
}

/* Submit form */
.pretty-form.long-text .cap-reply {
  display: block;
}
.pretty-form.long-text #captcha {
  width: 250px;
}

/* Edit listing */
.edit .md {
    clear: left;
    margin-bottom: 1em;
}
.edit .diff {
    padding: 0;
    margin: 0 !important;
    border: 1px solid #ccc;
    clear: left;
}
.edit .diff div {
    margin: 0;
}
.edit .diff .new {
    background-color: #dfd;
}
.edit .diff .del {
    background-color: #fdd;
}
.edit .diff .context {
    background-color: #eaf2f5;
    color: #999;
}
.edit .editor {
    float: left;
}
.edit .editor .author, .edit .orig-author .author {
    float: none;
    display: inline;
}
.edit .orig-author .author {
    margin-right: 0;
}
/* Meetups */
#map {
  margin-top: 1em;
  width: 640px;
  height: 480px;
}
div.meta.meetup {
  color: black;
}
div.meta.meetup strong {
  float: left;
  width: 4em;
}
.pretty-form.meetup label {
  font-weight: bold;
  float: left;
  width: 100px;
}
.pretty-form.meetup input,
.pretty-form.meetup textarea {
  width: 400px;
  float: left;
}
.pretty-form.meetup input.date {
  width: 142px;
  padding-right: 20px;
}
.pretty-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.pretty-form.meetup button.btn {
  margin-left: 0;
}
.pretty-form.meetup #NO_DESCRIPTION {
  margin: 0 0 5px 106px;
  display: block;
}
.pretty-form.meetup #geocoded_location {
  margin-left: 106px;
  clear: left;
}
.pretty-form.meetup #geocode_status {
  display: block;
  width: 16px;
  height: 16px;
  padding: 4px 0;
}