👨‍💻 Modern Hacker News by mimvahedi

/* ==UserStyle==
@name           👨‍💻 Modern Hacker News
@version        0.5
@namespace      mimvahedi
@preprocessor   stylus

@var select   iconType        "Icon type"              ["unicode", "emoji","image","no icon"]
@var select   ICONSTYLE       "Icon style"             ["doodle","stickers","color","material-outlined", "ios", "papercut","deco","isometric","fluency-systems-regular*"]
@var text     ICONCOLOR       "Icon color"             888888
@var color    PRIMARY         "primary color"          #f60
@var checkbox messageBorder   "border for messages"     0
@var checkbox inlineSiteName   "inline site name"     0

==/UserStyle== */
@-moz-document url-prefix("https://news.ycombinator.com/") {


  ICONSIZE=20;

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  html {
    font-family: inter, rubic, system-ui;
    accent-color: var(--p);
    caret-color: var(--p);
  }
  body {
    margin: 0;
  }
  :root {
    --s: 50rem;
    --p: PRIMARY;
    --rad: 4px;
  }
  body,
  td,
  .admin td,
  .subtext td,
  input,
  input[type="submit"],
  textarea,
  .default,
  .admin,
  .title,
  .subtext,
  .yclinks,
  .pagetop,
  .comhead,
  .comment,
  .hnname {
    font: inherit;
  }

  a {
    text-decoration: none;
  }
  p a:link {
    color: var(--p);
    text-decoration: none;
  }
  a:visited {
    color: var(--p);
    opacity: .5;
    text-decoration: none;
  }
  b {
    color: inherit;
  }
  textarea,
  input[type=text],
  input[type=password] {
    padding: .25rem .5rem;
    border: 1px solid #8882;
    border-radius: var(--rad);
  }

  input[type="submit"],
  .morelink {
    background: var(--p);
    border: none;
    color: #fff !important;
    display: inline-block;
    padding: .25em .75em;
    margin: .75rem 0;
    border-radius: var(--rad);
    transition: 250ms ease;
    cursor: pointer;
  }

  input[type="submit"]:hover,
  .morelink:hover {
    box-shadow: 0 0 2rem inset #0008;
  }

  html,
  body {
    font-size: 1em;
  }
  #hnmain {
    max-width: 100%;
    width: var(--s);
    min-width: unset;
    background: transparent;
  }

  td[bgcolor] {
    background: transparent;
  }

  td[bgcolor="#ff6600"] {
    background: transparent;
    padding: 1em 0;
  }

  td[bgcolor="#ff6600"] td:first-of-type {
    display: none !important;
  }


  .fatitem td[colspan="2"]:empty {
    display: none;
  }

  font[color="#3c963c"] {
    color: hsl(150, 50%, 50%);
  }
  /*header*/
  td .pagetop {
    display: flex;
    font-size: 0;
    line-height: 1.5;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  td .pagetop :is(a, [id]) {
    font-size: 1rem;
  }
  td[bgcolor="#ff6600"] tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
  }
  td[bgcolor="#ff6600"] tr td {
    display: block;
    height: unset !important;
    padding: 0 !important;
  }

  .hnname {
    margin: 0;
  }
  .pagetop .hnname a,
  .pagetop .hnname a:visited {
    font-size: 0;
    display: inline-block;
  }
  .pagetop .hnname a:before {
    background: var(--p);
    color: #fff;
    font-weight: bold;
    content: "H";
    font-size: 1rem;
    padding: .25em .5em;
    border-radius: 10em;
    line-height: 1.5;
  }

  .topsel a:link,
  .topsel a:visited {
    color: var(--p)
  }
  .sitebit.comhead {
    font-size: 0;
  }
  .sitebit.comhead > a {
    font-size: 1rem;
    color: inherit;
  }

  .spacer {
    height: 1.5rem !important;
  }
  .subtext {
    border-bottom: 1px solid #8882;
    padding-top: .25rem;
    padding-bottom: 1.5em;
  }

  #hnmain table {
    border-spacing: .5rem 0;
    width: 100%;
  }


  .titleline {
    display: flex;
    flex-direction: column-reverse;
  }
  .titleline > a {
    /*font-weight: bold;*/
    font-size: 1em;
    line-height: 1.5;
    display: block;
    margin: .25em 0;
  }
  .titleline > a:visited {
    color: inherit;
  }

  .comment {
    max-width: var(--s);
    padding: 1rem;
  }

  .athing,
  .athing + tr {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .athing {
    position: relative;
  }

  tr.athing > td td.default {
    padding: 0;
    margin: .5rem 0;
    display: block;
    line-height: 1.75;
    border-left: 2px solid currentColor;
  }

  .default p {
    margin: .25rem 0;
  }

  .athing > .title:first-of-type {
    position: absolute;
    width: 1.75em;
    height: 1.75em;
    right: 0;
    line-height: 1.75em;
    text-align: center;
    border-radius: 3rem;
    /*background: #8884;*/
  }

  tr.athing > td td.default > div:first-child {
    padding: .5rem 1rem 0 1rem;
    margin: 0 !important;
  }

  tr.athing > td td.default > div:first-child + br:first-of-type {
    display: none;
  }

  .comhead,
  .subtext a:visited {
    color: inherit;
  }

  /*comments*/
  .toptext {
    margin-top: 1.5rem;
  }

  /*vote td*/
  .votelinks {
    position: absolute;
    right: 0;
    top: .5em;
  }
  .votearrow {
    vertical-align: middle;
    font-size: 1rem;
    background: transparent;
    color: inherit;
    width: 2em;
    height: 1.5em;
    background: #8882;
    margin: 1.5em 0 0;
    border-radius: .25em;
    border: 1px solid #8884;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*subline*/
  .subline {
    font-size: 0;
  }
  .subline > :is(a, span):not(:empty) {
    font-size: 1rem;
    margin-right: .5rem;
  }

  .score:before,
  .hnuser:before,
  .age:before,
  .subline > :last-child:before {
    /*filter: grayscale(1);*/
  }

  if iconType is unicode {
    .votearrow:before {
      // ["⬆","↑","⌃"]
      content: "⌃";
      font-weight: bold;
    }

    .score:before {
      content: "☆ ";
    }
    .hnuser:before {
      content: "○ ";
    }
    .age:before {
      content: "☼ ";
    }
    .subline > :last-child:before {
      content: "⌘ ";
    }
  }

  .score:before,
  .hnuser:before,
  .age:before,
  .subline > :last-child:before {
    color: var(--p);
  }

  if iconType is emoji {
    .score:before {
      content: "⭐ ";
    }
    .hnuser:before {
      content: "👤 ";
    }
    .age:before {
      content: "⌚ ";
    }
    .subline > :last-child:before {
      content: "💬 ";
    }
    .votearrow:before {
      content: "👍";
    }
  }


  if iconType is image {
    .score:before,
    .hnuser:before,
    .age:before,
    .subline > :last-child:before {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      padding-inline-end: .25em;
    }

    .score:before {
      content: url(https://img.icons8.com/ICONSTYLE/ICONSIZE/ICONCOLOR/star);
    }
    .hnuser:before {
      content: url(https://img.icons8.com/ICONSTYLE/ICONSIZE/ICONCOLOR/user);
    }
    .age:before {
      content: url(https://img.icons8.com/ICONSTYLE/ICONSIZE/ICONCOLOR/calendar);
    }
    .subline > :last-child:before {
      content: url(https://img.icons8.com/ICONSTYLE/ICONSIZE/ICONCOLOR/chat);
    }
    .votearrow:before {
      content: url(https://img.icons8.com/ICONSTYLE/ICONSIZE/ICONCOLOR/chevron-up);
    }
  } // more
  .morespace + tr td[colspan] {
    display: none;
  }


  if messageBorder {

    tr.athing > td td.default > div:first-child {
      border-bottom: 1px solid #8884;
      padding: .5em 1em;
    }
    tr.athing > td td.default {
      border: 1px solid #8884;
      border-radius: var(--rad);
    }
  }

  if inlineSiteName {

    .sitebit.comhead > a:before {
      content: " • ";
    }
    .titleline {
      flex-direction: row;
      align-items: center;
    }
  }


  @media (prefers-color-scheme: dark) {
    body {
      background: #1c1a17;
      color: #e1e8ff;
    }
    .c00,
    .c00 a:link {
      color: #fff;
    }
    a:link,
    .pagetop a:visited {
      color: #fff;
    }
    textarea,
    input[type=text],
    input[type=password] {
      background: #fff1;
      color: inherit;
      border-radius: 4px;
    }
  }
}
@-moz-document url-prefix("https://news.ycombinator.com/login") {
  html {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  body {
    padding: 1rem;
    border: 1px solid #8884;
    border-radius: var(--rad);
  }
  form:first-of-type {
    margin-bottom: 2rem;
  }

  br {
    height: 0;
    display: block;
  }

  b {
    display: block;
    font-size: 1.25rem;
    margin-bottom: .25rem;
  }
  b:nth-of-type(2) {
    margin-top: 5rem;
    display: block;
  }
}