Revisions to Bringing back the old front page with custom CSS: a guide

added 2266 characters in body

Source Link

edited Feb 9, 2022 at 2:00

11.8k
6
11

/** Container **/

.s-post-summary {
  padding-left: 8px;
}

/** Stats grid **/

.s-post-summary--stats {
  display: grid;
  width: unset;
  grid-template-areas:
    "score answers views"
    ". bounty ."
    ;
  grid-template-columns: repeat(2, 1fr); /* change to 3 for views */
  column-gap: var(--s-post-summary-stats-gap);
  row-gap: var(--s-post-summary-stats-gap);
  align-content: start;
  align-items: center;
}

.s-post-summary--stats .s-post-summary--stats-item,
.s-post-summary--stats .s-post-summary--stats-item.has-answers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  width: 60px;
}

/** State grid items **/

.s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
  font-size: larger;
  margin-right: 0 !important;
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(1) {
  grid-area: score;
  border: none;
  background-color: #eee;
  border-radius: 0px;
  color: #3b4045
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(2) {
  grid-area: answers;
  border: none;
  border-radius: 0px;
  background-color: #833700;
  color: #FFF
}

.s-post-summary--stats .s-post-summary--stats-item.has-answers {
    background-color: #65be00;
    color:#FFF;
}


.s-post-summary--stats .s-post-summary--stats-item:nth-child(3) {
  grid-area: views;
  border: none;
  background-color: #eee;
  border-radius: 0px;
}

.s-post-summary--stats-item.has-bounty {
  grid-area: bounty;
}

.s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
  color: var(--fc-light);
}

/** Tags **/

.post-tag.s-tag__watched {
  padding-left: 0.5em;
}

.post-tag.s-tag__watched:before {
  content: none;
}

/** Hide unwanted elements **/
.s-post-summary--stats .iconCheckmarkSm,
.s-post-summary--meta .s-avatar {
  display: none;
}

.s-post-summary--stats-item.has-accepted-answer {
    color:#FFF;
    background-color: #177d00;
}

/* Part of Denis Nardin's Original CSS (some of it merged above) */

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
}

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

/** Container **/

.s-post-summary {
  padding-left: 8px;
}

/** Stats grid **/

.s-post-summary--stats {
  display: grid;
  width: unset;
  grid-template-areas:
    "score answers views"
    ". bounty ."
    ;
  grid-template-columns: repeat(2, 1fr); /* change to 3 for views */
  column-gap: var(--s-post-summary-stats-gap);
  row-gap: var(--s-post-summary-stats-gap);
  align-content: start;
  align-items: center;
}

.s-post-summary--stats .s-post-summary--stats-item,
.s-post-summary--stats .s-post-summary--stats-item.has-answers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  width: 60px;
}

/** State grid items **/

.s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
  font-size: larger;
  margin-right: 0 !important;
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(1) {
  grid-area: score;
  border: none;
  background-color: #eee;
  border-radius: 0px;
  color: #3b4045
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(2) {
  grid-area: answers;
  border: none;
  border-radius: 0px;
  background-color: #833700;
  color: #FFF
}

.s-post-summary--stats .s-post-summary--stats-item.has-answers {
    background-color: #65be00;
    color:#FFF;
}


.s-post-summary--stats .s-post-summary--stats-item:nth-child(3) {
  grid-area: views;
  border: none;
  background-color: #eee;
  border-radius: 0px;
}

.s-post-summary--stats-item.has-bounty {
  grid-area: bounty;
}

.s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
  color: var(--fc-light);
}

/** Tags **/

.post-tag.s-tag__watched {
  padding-left: 0.5em;
}

.post-tag.s-tag__watched:before {
  content: none;
}

/** Hide unwanted elements **/
.s-post-summary--stats .iconCheckmarkSm,
.s-post-summary--meta .s-avatar {
  display: none;
}

.s-post-summary--stats-item.has-accepted-answer {
    color:#FFF;
    background-color: #177d00;
}

/* Part of Denis Nardin's Original CSS (some of it merged above) */

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
}

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

/** Container **/

.s-post-summary {
  padding-left: 8px;
}

/** Stats grid **/

.s-post-summary--stats {
  display: grid;
  width: unset;
  grid-template-areas:
    "score answers views"
    ". bounty ."
    ;
  grid-template-columns: repeat(2, 1fr); /* change to 3 for views */
  column-gap: var(--s-post-summary-stats-gap);
  row-gap: var(--s-post-summary-stats-gap);
  align-content: start;
  align-items: center;
}

.s-post-summary--stats .s-post-summary--stats-item,
.s-post-summary--stats .s-post-summary--stats-item.has-answers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  width: 60px;
}

/** State grid items **/

.s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
  font-size: larger;
  margin-right: 0 !important;
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(1) {
  grid-area: score;
  border: none;
  background-color: #eee;
  border-radius: 0px;
  color: #3b4045
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(2) {
  grid-area: answers;
  border: none;
  border-radius: 0px;
  background-color: #833700;
  color: #FFF
}

.s-post-summary--stats .s-post-summary--stats-item.has-answers {
    background-color: #65be00;
    color:#FFF;
}


.s-post-summary--stats .s-post-summary--stats-item:nth-child(3) {
  grid-area: views;
  border: none;
  border-radius: 0px;
}

.s-post-summary--stats-item.has-bounty {
  grid-area: bounty;
}

.s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
  color: var(--fc-light);
}

/** Tags **/

.post-tag.s-tag__watched {
  padding-left: 0.5em;
}

.post-tag.s-tag__watched:before {
  content: none;
}

/** Hide unwanted elements **/
.s-post-summary--stats .iconCheckmarkSm,
.s-post-summary--meta .s-avatar {
  display: none;
}

.s-post-summary--stats-item.has-accepted-answer {
    color:#FFF;
    background-color: #177d00;
}

/* Part of Denis Nardin's Original CSS (some of it merged above) */

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
}

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

added 2266 characters in body

Source Link

edited Feb 9, 2022 at 1:53

Emily

11.8k
6
11

To enable it, follow the steps below:

Install a browser extension allowing you to load custom CSS onto pages, such as Stylus (Firefox Link, Google Chrome link).

Go to the MathOverflow homepage and click the Stylus icon:

Go to "Write style for: mathoverflow.net/this URL".

You'll be met by this screen:

Paste the above CSS into the "Code 1:" section.

Save via the left sidebar.

Everything should now be working again.

added 2266 characters in body

Source Link

edited Feb 9, 2022 at 1:43

Emily

11.8k
6
11

The following CSS recovers it, atHere's a Franken-CSS that combines the cost of painting vote boxes brown, tooabove two styles:

/** Container **/

.s-post-summary {
  padding-left: 8px;
}

/** Stats grid **/

.s-post-summary--stats {
  display: grid;
  width: unset;
  grid-item.hastemplate-areas:
    "score answers {views"
    border:". none;bounty ."
    background;
  grid-colortemplate-columns: #65be00;
repeat(2, 1fr); /* change colorto 3 for views */
  column-gap:#FFF; var(--s-post-summary-stats-gap);
  row-gap: var(--s-post-summary-stats-gap);
 border align-radiuscontent: 0pxstart;
  !important;align-items: center;
} 

.s-post-summary--stats .s-post-summary--stats-item,
.s-post-summary--stats .s-post-summary--stats-item.has-answers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  width: 60px;
}

/** State grid items **/

.hass-acceptedpost-answersummary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
  font-size: larger;
  bordermargin-right: none;0 !important;
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(1) {
  colorgrid-area:#FFF; score;
  border: none;
  background-color: #177d00;#eee;
    border-radius: 0px0px;
  !important;color: #3b4045
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(2) {
  grid-area: answers;
  border: none;
  border-radius: 0px;
  background-color: #833700;
  color: #FFF
}

.s-post-summary--stats .s-post-summary--stats-item.has-answers {
    background-color: #65be00;
    color:#FFF;
}


.s-post-summary--stats .s-post-summary--stats-item:nth-child(3) {
  grid-area: views;
  border: none;
  background-color: #eee;
  border-radius: 0px0px;
}

.s-post-summary--stats-item.has-bounty {
 !important; grid-area: bounty;
}

.s-post-summary--stats .s-post-summary--stats-item.s-numberpost-summary--stats-item__emphasized {
  color: var(--fc-light);
}

/** Tags **/

.mr4post-tag.s-tag__watched {
  padding-left: 0.5em;
}

.post-tag.s-tag__watched:before {
  colorcontent: #FFF;none;
}

/** Hide unwanted elements **/
.s-post-summary--stats .iconCheckmarkSm,
.s-post-summary--meta .s-avatar {
  display: none;
} 

.s-post-summary--stats-item.has-unitaccepted-answer {
    color:#FFF;
 #FFF   background-color: #177d00;
}

/* Part of Denis Nardin's Original CSS (some of it merged above) */

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
} 

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

Here'sIt gives the following result:

The following CSS recovers it, at the cost of painting vote boxes brown, too:

.s-post-summary--stats-item.has-answers {
    border: none;
    background-color: #65be00;
    color:#FFF;
    border-radius: 0px  !important;
}

.s-post-summary--stats-item.has-answers.has-accepted-answer {
    border: none;
    color:#FFF;
    background-color: #177d00;
    border-radius: 0px  !important;
}

.s-post-summary--stats-item {
    border: none;
    background-color: #833700;
    color: #FFF;
    border-radius: 0px  !important;
}

.s-post-summary--stats-item-number.mr4 {
    color: #FFF;
}
.s-post-summary--stats-item-unit {
    color: #FFF
}

Here's the result:

Here's a Franken-CSS that combines the above two styles:

/** Container **/

.s-post-summary {
  padding-left: 8px;
}

/** Stats grid **/

.s-post-summary--stats {
  display: grid;
  width: unset;
  grid-template-areas:
    "score answers views"
    ". bounty ."
    ;
  grid-template-columns: repeat(2, 1fr); /* change to 3 for views */
  column-gap: var(--s-post-summary-stats-gap);
  row-gap: var(--s-post-summary-stats-gap);
  align-content: start;
  align-items: center;
} 

.s-post-summary--stats .s-post-summary--stats-item,
.s-post-summary--stats .s-post-summary--stats-item.has-answers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  width: 60px;
}

/** State grid items **/

.s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
  font-size: larger;
  margin-right: 0 !important;
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(1) {
  grid-area: score;
  border: none;
  background-color: #eee;
  border-radius: 0px;
  color: #3b4045
}

.s-post-summary--stats .s-post-summary--stats-item:nth-child(2) {
  grid-area: answers;
  border: none;
  border-radius: 0px;
  background-color: #833700;
  color: #FFF
}

.s-post-summary--stats .s-post-summary--stats-item.has-answers {
    background-color: #65be00;
    color:#FFF;
}


.s-post-summary--stats .s-post-summary--stats-item:nth-child(3) {
  grid-area: views;
  border: none;
  background-color: #eee;
  border-radius: 0px;
}

.s-post-summary--stats-item.has-bounty {
  grid-area: bounty;
}

.s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
  color: var(--fc-light);
}

/** Tags **/

.post-tag.s-tag__watched {
  padding-left: 0.5em;
}

.post-tag.s-tag__watched:before {
  content: none;
}

/** Hide unwanted elements **/
.s-post-summary--stats .iconCheckmarkSm,
.s-post-summary--meta .s-avatar {
  display: none;
} 

.s-post-summary--stats-item.has-accepted-answer {
    color:#FFF;
    background-color: #177d00;
}

/* Part of Denis Nardin's Original CSS (some of it merged above) */

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
} 

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

It gives the following result:

Post Made Community Wiki

Source Link

created Feb 9, 2022 at 1:10

Emily

11.8k
6
11

Loading

Stack Exchange Network

Return to Answer