subreply.css

/* Subreply CSS - https://github.com/HoangTuan110/subreply-css
 * This style is under the MIT license */

html {
  --font-small:13px;
  --font-regular:17px;
  --radius:6px;
  --d:0.2s;
  --primary-bg:#fff;
  --whitesmoke:#f0f0f0;
  --gainsboro:#e0e0e0;
  --gray:grey;
  --primary-fg:#000;
  --accent:#4060e0;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
::-moz-placeholder {
  color:#1f1f1f 
}
::-webkit-input-placeholder {
  color:var(--gray) 
}
@media (prefers-color-scheme:dark) {
  html {
    --primary-bg:#000;
    --whitesmoke:#181818;
    --gainsboro:#282828;
    --gray:grey;
    --primary-fg:#fff;
    --blockquote-color:#fff;
    --accent:#6080e0 
  }
  ::-moz-placeholder {
    color:#eee 
  }
}
body {
  background-color:var(--primary-bg);
  color:var(--primary-fg);
  cursor:default 
}
a {
  color:var(--accent);
  cursor:pointer;
  padding:5px 0;
  text-decoration:none;
  transition:color var(--d) 
}
b, i, u {
  font-style:normal;
  font-weight:400;
  text-decoration:none 
}
form, input, label {
  display:block 
}
body, input, label, select, textarea {
  font-family:'Route 159', sans-serif;
  font-size:var(--font-regular);
}
label {
  color:var(--primary-fg);
  font-size:var(--font-small);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap 
}
label i {
  color:var(--gray) 
}
sup {
  line-height:0 
}
input, select, textarea {
  background-color:var(--whitesmoke);
  border:0;
  border-radius:var(--radius);
  color:var(--primary-fg);
  display:initial;
  font-weight:400 
}
input:focus, select:focus, textarea:focus {
  outline:0 none 
}
input[type=email], input[type=password], input[type=text], input[type=url], select, textarea {
  overflow:hidden;
  resize:none;
  width:calc(50% - 15px) 
}
input[type=submit] {
  cursor:pointer;
  padding:5px 15px 
}
input[type=submit]:hover {
  background-color:var(--gainsboro) 
}
button {
  cursor:pointer;
  padding:5px 15px 
}
svg {
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2 
}
svg path {
  fill:none;
  stroke:var(--primary-fg) 
}
table {
  margin:10px 0;
  width:100% 
}
table th {
  color:var(--primary-fg);
  font-size:var(--font-small);
  font-weight:400;
  padding-bottom:2px 
}
table td {
  border-top:1px solid var(--gray);
  padding:2px 0 
}
table td:last-child {
  padding-bottom:0 
}
table a {
  color:var(--accent) 
}
table a:hover {
  color:var(--gray) 
}
@font-face {
  font-family:'Route 159';
  font-style:normal;
  font-weight:400;
  src:url(https://files.catbox.moe/gt6un3.woff) format("woff") 
}
@font-face {
  font-family:'Route 159';
  font-style:normal;
  font-weight:700;
  src:url(https://files.catbox.moe/outwck.woff) format("woff") 
}
a[href^=mailto]:before {
  content:"📧 " 
}
a[href^=tel]:before {
  content:"📞 " 
}
a[href^=sms]:before {
  content:"💬 " 
}
blockquote {
  background:var(--primary-bg);
  border-left:10px solid var(--accent);
  margin:1.5em 10px;
  padding:.5em 10px;
  quotes:"\201C""\201D""\2018""\2019" 
}
blockquote:before {
  color:var(--accent);
  content:open-quote;
  font-size:4em;
  line-height:.1em;
  margin-right:.25em;
  vertical-align:-.4em 
}
blockquote p {
  display:inline 
}
[type=checkbox], [type=radio] {
  box-sizing:border-box;
  padding:0 
}
pre {
  border:1px solid #e1e1e1;
  clear:both;
  display:block;
  height:1%;
  margin:auto 40px;
  padding:1em;
  white-space:pre;
  white-space:-moz-pre-wrap;
  white-space:-o-pre-wrap;
  white-space:pre-wrap;
  width:auto 
}
code, pre {
  background:#f4f4f4;
  color:#555;
  font-size:90%;
  line-height:1.2em 
}
code {
  display:inline;
  font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace 
}
/* Responsive images
 * Stolen from Sakura (https://oxal.org/projects/sakura/)
 */
img {
	height: auto;
	max-width: 75%;
	margin-top: 0px;
}