journalduhacker/app/assets/stylesheets/application.css
joshua stein 9535b05490 remove story downvoting, add story hiding
stories should either be reported for spam (coming later), upvoted,
or left alone rather than being downvoted for being uninteresting.
since users don't like leaving uninteresting things alone, they can
now hide stories from their view without affecting the story's
score.

hiding is implemented as a Vote with its vote set to 0 and the
reason set to "H"

add a /hidden url which shows all of a user's hidden stories

while i'm here, simplify Vote guts and add some tests to make sure
all the flip-flopping stuff works right
2014-03-03 17:20:21 -06:00

1107 lines
18 KiB
CSS

/*
*= require select2
*= require_self
*= require mobile
*/
/* generics */
/* force a vertical scrollbar to avoid page-shifting */
html {
overflow-y: scroll;
}
body, textarea, input, button {
font-family: "helvetica neue", arial, sans-serif;
font-size: 9.5pt;
color: #333;
}
a {
color: #2562dc;
cursor: pointer;
}
ol.stories.list li.story div.details span.link a:visited {
color: #7395d9;
}
h1 {
margin: 0px;
margin-bottom: 0.75em;
padding: 0px;
font-size: 14pt;
font-weight: bold;
}
div.clear {
clear: both;
}
div.s {
height: 1px;
}
a.tag {
background-color: #fffcd7;
border: 1px solid #d5d458;
border-radius: 10px;
color: #555;
font-size: 7.5pt;
margin-left: 0.25em;
padding: 0px 0.5em 1px 0.5em;
text-decoration: none;
vertical-align: text-top;
}
a.tag_is_media {
background-color: #f5d1fa;
border-color: #a26dc8;
}
a.tag_ask, a.tag_show, a.tag_interview {
background-color: #f9ddde;
border-color: #f0b2b8;
}
a.tag_meta {
background-color: #eee;
border-color: #c8c8c8;
}
span.fakea {
cursor: pointer;
text-decoration: underline;
color: gray;
}
span.na {
color: gray;
font-style: italic;
}
div.shorten_first_p p:first-child {
margin-top: 0.5em;
}
pre {
overflow-x: auto;
}
/* default form styling */
input,
select,
button,
textarea {
color: #555;
line-height: 1.2em;
}
textarea {
line-height: 1.35em;
}
input,
button,
select,
textarea {
padding: 3px 5px;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea {
border: 1px solid #ccc;
}
input[type="checkbox"] {
margin-top: 0.5em;
}
select {
border: 1px solid #ccc;
}
input:focus,
textarea:focus {
border-color: #888;
color: #303030;
outline: 0;
}
input[type="submit"]:focus,
button:focus {
border-color: #888;
outline: 1px solid #888;
}
/* these must be separate */
::-webkit-input-placeholder {
color: #aaa;
font-style: italic;
}
:-moz-placeholder {
color: #aaa;
font-style: italic;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
div.select2-choices {
display: inline-block;
padding: 2px 10px 2px 10px;
line-height: 18px;
color: #333333;
text-align: center;
background-color: #fafafa;
border: 1px solid #ccc;
border-bottom-color: #bbb;
cursor: pointer;
}
button:first-child,
input[type="button"]:first-child,
input[type="reset"]:first-child,
input[type="submit"]:first-child {
margin-left: 0;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
}
select {
margin-top: 3px;
min-width: 100px;
}
select:focus {
border-color: rgba(160,160,160,.8);
color: #303030;
outline: 0;
}
select::-moz-focus-inner {
border: 0;
outline: 0;
}
div.field_with_errors {
display: inline;
}
div.field_with_errors input[type="text"],
div.field_with_errors input[type="email"],
div.field_with_errors input[type="password"] {
border: 1px solid red;
}
div.field_with_errors input:focus {
border-color: rgba(255,0,0,.8);
}
input:disabled, button:disabled {
background-color: #e9e9e9;
color: gray;
}
/* outliners */
div#wrapper {
margin-left: auto;
margin-right: auto;
padding-bottom: 2em;
min-width: 800px;
max-width: 1000px;
}
div#inside {
margin-left: 0.25em;
margin-right: 0.25em;
}
/* header */
#header {
font-weight: bold;
padding: 5px 42px 5px 10px;
margin-top: 1em;
margin-bottom: 0.5em;
}
#headerleft {
float: left;
}
#l_holder {
background: #ee0000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAL0ALQAtZF7+HAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wCCBAuLt2rqugAAACMSURBVDjL1ZMxCsJQEERfRPEk9im9mGfxBpaCnaXmBraeQEidKsKz2eIb/peEIOLAwu4Ws7PMbsUAKlOwYCaWmd4aWCV1B4yXpR59R61SitwKDdBHfgPaSTsF8zOmHz5NLykAeCRqvuvCfxGcgP0YF3ZqHy7c1Yt6jfo8dCF3idvkQjcRRVQ/f6bZBC+RBoeZnlCyqwAAAABJRU5ErkJggg==) no-repeat;
background-position: center;
float: left;
display: block;
width: 16px;
height: 16px;
padding: 1px;
margin-left: 4px;
margin-right: 11px;
}
#header h1 {
font-size: 11pt;
margin: 0px;
margin-left: 22px;
margin-right: 1em;
padding: 0px;
display: inline;
}
#header h1 a {
color: #333;
text-decoration: none;
}
#headertitle {
padding-right: 0.75em;
}
#headertitle a {
color: #333;
text-decoration: none;
}
.headerlinks a {
color: #777;
text-decoration: none;
padding-right: 0.75em;
}
#headerright {
float: right;
text-align: right;
}
#headerright .headerlinks a {
padding-right: 0;
padding-left: 0.75em;
}
#header a.cur_url {
color: #333;
}
#header a.new_messages {
color: #ac130d;
}
/* footer */
div#footer {
float: right;
font-weight: bold;
margin-top: 1.5em;
padding-right: 42px;
}
div#footer a {
color: #999;
text-decoration: none;
padding-left: 0.75em;
}
/* other specifics */
div#user_about {
margin-left: 12em;
}
div#gravatar {
border: 2px solid #fff;
border-radius: 100% 100%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
float: right;
height: 100px;
width: 100px;
}
div#gravatar img {
border-radius: 50px;
height: 100px;
width: 100px;
}
/* stories */
ol.stories,
ol.comments,
ol.search_results {
padding: 0;
list-style: none;
margin: 0;
}
ol.comments {
margin-left: 20px;
margin-bottom: 0em;
padding-left: 6px;
line-height: 1.35em;
}
ol.comments1 {
margin-left: 0;
padding-left: 25px;
}
ol.comments.comments1 {
border-left-color: transparent;
}
ol.comments.collapsed ol,
ol.comments.collapsed li {
display: none;
}
ol.search_results {
margin-left: 20px;
margin-bottom: 0em;
padding-left: 6px;
}
ol.search_results li.story {
padding-bottom: 0.75em;
}
div.voters {
float: left;
margin-top: -4px;
width: 40px;
}
div.voters div.score {
color: #aaa;
font-size: 9pt;
margin-top: 1px;
margin-bottom: -3px;
text-align: center;
}
div.voters .upvoter,
div.voters .downvoter {
border-color: transparent transparent #bbb transparent;
border-style: solid;
border-width: 6px;
text-decoration: none;
width: 0px;
height: 0;
margin-bottom: 0px;
margin-left: 14px;
padding: 0;
display: block;
}
div.voters .upvoter:hover,
.upvoted div.voters .upvoter {
border-bottom-color: #ac130d;
}
div.voters .upvoter {
border-bottom-width: 11px;
}
div.voters .downvoter {
border-color: #bbb transparent transparent transparent;
border-width: 5px;
margin-top: 4px;
margin-left: 15px;
margin-bottom: -5px;
border-top-width: 9px;
}
div.voters .downvoter:hover,
.downvoted div.voters .downvoter {
border-top-color: gray;
}
div.voters .downvoter.downvoter_stub {
border-color: transparent;
}
li.story {
clear: both;
}
li.story div.story_liner {
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.comment {
clear: both;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.comment a {
color: #666;
}
ol.stories li:first-child div.story_liner {
padding-top: 0.5em;
}
li div.details {
padding-top: 0.1em;
}
.negative {
opacity: 0.7;
color: gray !important;
}
.negative_3 {
opacity: 0.4;
}
.negative_5 {
opacity: 0.3;
}
.negative_7 {
opacity: 0.2;
}
.comment.highlighted {
background-color: #ffffef;
border-radius: 20px;
}
li .link {
font-weight: bold;
vertical-align: middle;
}
li .link a {
font-size: 11pt;
text-decoration: none;
}
li.story a.tag {
vertical-align: middle;
}
li .tags {
margin-right: 0.25em;
}
li .domain {
color: #888;
font-style: italic;
font-size: 8.5pt;
vertical-align: middle;
}
li .byline {
color: #888;
font-size: 8.5pt;
}
li.story .byline {
margin-top: 1px;
}
li .byline a {
color: #888;
text-decoration: none;
}
span.new_user, a.new_user,
li .byline a.new_user {
color: green;
}
span.inactive_user, a.inactive_user,
li .byline a.inactive_user {
color: gray;
text-decoration: line-through;
}
li.story.hidden {
opacity: 0.25;
}
ol.show_hidden li.story.hidden {
opacity: 1.0 !important;
}
li.story.expired {
opacity: 0.6;
}
li.story.expired a {
color: gray !important;
}
li div.details,
div.story_content {
margin-left: 40px;
margin-right: 40px;
}
div.story_content {
margin-bottom: 1em;
}
div.morelink {
float: left;
}
div.morelink,
div.page_link_buttons {
margin-top: 1.5em;
margin-left: 40px;
}
div.morelink a {
color: #666;
font-weight: bold;
text-decoration: none;
}
div.page_link_buttons {
font-weight: bold;
margin-top: 2em;
}
div.page_link_buttons a {
color: #666;
border: 1px solid #d0d0d0;
background-color: #f3f3f3;
padding: 0.25em 0.5em;
font-weight: bold;
text-decoration: none;
margin-left: 0.5em;
}
div.page_link_buttons a.cur {
background-color: transparent;
border-color: transparent;
}
div.story_text {
margin-bottom: 1.5em;
max-width: 700px;
line-height: 1.4em;
}
div.story_text p {
margin: 0.75em 0;
line-height: 1.4em;
}
div.story_text img {
max-width: 100%;
}
div.comment_text {
max-width: 700px;
}
div.comment_text blockquote,
div.markdown_help blockquote {
font-style: italic;
margin: 0.25em 0 0 0.5em;
padding: 0 0 0 1em;
border-left: 2px solid gray;
}
div.comment_text pre,
div.markdown_help pre {
margin-left: 1em;
}
div.comment_text ol {
margin: 0;
padding: 0 1.5em;
}
div.comment_text ol li {
padding: 0 !important;
margin: 0 !important;
}
div.comment_text p {
margin: 0.5em 0;
}
div.comment_text p:first-child {
margin-top: 0.3em;
}
div.comment_actions a {
color: #888;
font-weight: bold;
font-size: 8.5pt;
text-decoration: none;
}
a.pagelink {
border: 1px solid #ddd;
background-color: #fbfbfb;
padding: 4px 8px;
}
a.pagelink.curpage {
border: 1px solid gray;
background-color: white;
font-weight: bold;
}
#downvote_why {
position: absolute;
width: 100px;
border: 1px solid #ccc;
border-bottom: 0;
z-index: 2;
}
#downvote_why a {
background-color: white;
color: #555;
border-bottom: 1px solid #ccc;
display: block;
padding: 3px;
font-size: 9pt;
}
#downvote_why a:hover {
background-color: #eee;
}
#downvote_why a.cancelreason {
background-color: #eee;
font-size: 8pt;
}
#downvote_why_shadow {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
div.markdown_help {
background-color: #f4f4f4;
border: 1px solid #e0e0e0;
padding: 0 1em;
margin-top: 0.5em;
}
div.markdown_help_label {
float: right;
font-size: 9pt;
line-height: 2em;
color: #aaa;
text-decoration: underline;
cursor: pointer;
}
.comment .preview {
padding-left: 25px;
}
div#story_preview {
margin-top: 2em;
margin-left: 3.5em;
}
div#story_box input#story_url {
width: 508px;
}
div#story_box button#story_fetch_title {
padding-top: 1px;
padding-bottom: 1px;
}
div#story_box input#story_title,
div#story_box input#story_moderation_reason {
width: 600px;
}
div#story_box #story_tags_a {
width: 624px;
}
div#story_box textarea {
width: 600px;
}
div#story_box div.markdown_help_toggler {
margin-left: 7em;
width: 610px;
}
div.comment_form_container {
max-width: 700px;
}
div.comment_form_container form {
margin-left: 15px;
}
ul.root {
list-style-type: none;
margin: 0;
padding: 0 2px;
}
ul.user_tree, ul.user_tree ul {
list-style-type: none;
/* vline */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC) repeat-y;
margin: 0;
padding: 0;
}
ul.root ul, ul.user_tree ul {
margin-left: 10px;
}
ul.user_tree li {
margin: 0;
padding: 0 12px;
line-height: 1.5em;
/* node */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==) no-repeat;
}
ul.user_tree li:last-child {
/* lastnode */
background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC) no-repeat;
}
ul.user_tree li, ul.root li {
color: #888;
}
/* data tables */
table.data caption {
font-weight: bold;
text-align: left;
padding-bottom: 3px;
}
table.data .capright {
float: right;
}
table.data th {
background-color: #eaeaea;
border-bottom: 1px solid #cacaca;
border-top: 1px solid #cacaca;
text-align: left;
}
table.data th img {
vertical-align: middle;
margin-bottom: 5px;
}
table.data th.r, table.data td.r {
text-align: right;
padding-right: 3px;
}
table.data th,
table.data td {
padding: 0.25em 0.5em;
}
table.data tr.bold td {
font-weight: bold;
}
table.thread td {
padding: 0px 0px 0px 3px;
margin-bottom: 0px;
line-height: 17px;
/* text-vertical-align: middle; */
overflow: hidden;
}
table.thread td img {
vertical-align: middle;
}
table.data tr.row0 td,
table.data.zebra tr:nth-child(even) td {
background-color: #f8f8f8;
border-bottom: 1px solid #eaeaea;
}
table.data tr.row1 td,
table.data.zebra tr:nth-child(odd) td {
background-color: #f5f5f5;
border-bottom: 1px solid #eaeaea;
}
table.data tr.nobottom td {
border-bottom: 0px;
padding-bottom: 0px;
}
table.data tr.void td, table.data tr.void td a {
text-decoration: line-through;
color: gray !important;
}
table.data td p:first-child {
margin-top: 0;
}
table.data td p:last-child {
margin-bottom: 0;
}
/* boxes */
.box {
border: 0;
margin: 0 40px;
padding: 0;
}
.box_submitter {
border: 1px solid #cacaca;
border-top: 0px;
background-color: #eaeaea;
padding: 1em;
}
.box_submitter input {
width: 10em;
}
.box .legend {
background-color: white;
margin-bottom: 1em;
padding: 0;
font-weight: bold;
font-size: 11pt;
}
.box .sublegend {
font-size: 9.5pt;
font-weight: normal;
font-style: italic;
color: gray;
}
.box .legend.right {
float: right;
}
.box .boxtitle {
background-color: #f0f0f0;
border-bottom: 1px solid #cacaca;
display: block;
font-weight: bold;
margin: -3px -7px 4px -7px;
padding: 3px 5px 3px 5px;
}
.box label,
.box .label_holder {
display: block;
float: left;
margin-bottom: 4px;
}
.box label.required {
font-weight: bold;
}
.box img {
vertical-align: middle;
}
.box label,
.box span,
.box select,
.box br,
.box div.d {
line-height: 2em;
}
.box br {
clear: left;
}
.box .boxline {
clear: both;
margin-bottom: 0.5em;
}
.box p {
margin-top: 1em;
}
.box textarea {
margin-bottom: 4px;
width: 75%;
}
.box label,
.box .label_holder {
width: 7em;
line-height: 2em;
vertical-align: middle;
}
.box input.normal,
.box label.normal {
display: inline;
float: none;
vertical-align: middle;
}
.box span.d label,
.box td label,
.box .legend label {
display: inline;
float: none;
vertical-align: baseline;
}
.box span.d a.tag {
vertical-align: middle;
}
.box .label_holder label,
.box .label_holder input {
line-height: 2.5em;
vertical-align: middle;
}
.hint {
color: gray;
font-style: italic;
margin-left: 1em;
}
.hintblock {
color: gray;
font-style: italic;
margin-left: 7em;
}
.box.wide label,
.box.wide .label_holder {
width: 12em;
}
.box.wide .hintblock {
margin-left: 12em;
}
/* for flash_notices() and flash_errors() */
div.flash-error,
div.flash-notice,
div.flash-success,
div.errorExplanation {
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
color: white;
background-color: #eedc94;
background-repeat: repeat-x;
background-image: linear-gradient(top, #fceec1, #eedc94);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px;
border-style: solid;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
div.flash-error a,
div.flash-notice a,
div.flash-success a,
div.errorExplanation a {
font-weight: bold;
color: #404040;
}
div.flash-error p a,
div.flash-notice p a,
div.flash-success p a,
div.errorExplanation a {
color: #ffffff;
}
div.flash-error p,
div.flash-notice p,
div.flash-success p,
div.errorExplanation p {
margin-bottom: 0;
}
div.flash-error div,
div.flash-notice div,
div.flash-success div,
div.errorExplanation div {
margin-top: 5px;
margin-bottom: 2px;
line-height: 28px;
}
div.flash-error,
div.errorExplanation {
background-color: #c43c35;
background-repeat: repeat-x;
background-image: linear-gradient(top, #ee5f5b, #c43c35);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
div.flash-success {
background-color: #57a957;
background-repeat: repeat-x;
background-image: linear-gradient(top, #62c462, #57a957);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
div.flash-notice {
background-color: #339bb9;
background-repeat: repeat-x;
background-image: linear-gradient(top, #5bc0de, #339bb9);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
div.flash-error h2,
div.flash-notice h2,
div.flash-success h2,
div.errorExplanation h2 {
font-size: 1.25em;
margin: 0;
}
div#flasher {
position: fixed;
top: -40px;
right: 0px;
left: 325px;
text-align: center;
z-index: 15;
height: 1px;
}
div#flasher div.flash-error,
div#flasher div.flash-notice,
div#flasher div.flash-success {
line-height: 1.5em;
display: inline-block;
padding-top: 25px;
margin-left: auto;
margin-right: auto;
}
div#flasher span#flashcontent {
}
/* for error_messages_for() */
div.fieldWithErrors {
display: inline;
}
/* select2 deuglification */
.select2-container-multi.select2-container-active .select2-choices {
border: 1px solid rgba(160,160,160,.8);
}
.select2-container .select2-results .select2-highlighted {
background: darkred;
color: #fff;
}
.select2-container-multi .select2-choices {
border-color: #ccc;
background-image: none;
padding-top: 2px;
}
.select2-container-multi.select2-container-active .select2-choices {
box-shadow : none;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
box-shadow : none;
}
.select2-dropdown-open .select2-choice {
border: 1px solid #aaa;
border-bottom-color: transparent;
box-shadow : none;
}
.select2-container .select2-results li em {
background: none;
color: #aaa;
font-style: italic;
padding-left: 0.5em;
}