html { background: #000 }
body {
font-family: helvetica, sans-serif;
-webkit-text-size-adjust: none;
tab-size: 4;
line-height: 1.2;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
::-webkit-input-placeholder {
color: #555;
font-size: 0.85em;
line-height: 1.5em;
}
@keyframes target {
0%, 30% {
background: #f70;
}
}
@-webkit-keyframes target {
0%, 30% {
background: #f70;
}
}
:not(.target):target {
animation: target 1s;
-webkit-animation: target 1s;
}
.blk, img.center, textarea { display: block }
.ib { display: inline-block }
.inline, summary * { display: inline }
[hidden], .target:not(:target), #content > .sctrls { display: none }
.rel, .comment { position: relative }
.abs, .ctrls { position: absolute }
.fullwidth, input[type=text].fullwidth, input[type=email].fullwidth, input[type=password].fullwidth { width: 100% }
.maxwidth, img, input { max-width: 100% }
.lft, .user > * { float: left }
.rit, .user, h1 small, h2 small, .c-sig { float: right }
.nofloat { float: none }
.noumar, :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(article):not(small):not(blockquote) > :first-child:not(span):not(textarea), .comment > :last-child { margin-top: 0 }
.mar { margin: 6px }
.nomar, body, input, .comment .hover *, fieldset, textarea, .error * { margin: 0 }
.tumar, form *, .comment > blockquote:nth-child(2), .comment > pre:nth-child(2) { margin-top: 2px }
.sumar, :not(img) + .desc, .blk { margin-top: 4px }
.umar, :not(.row):not(.flex):not(.resp-flex) > section:not(:first-child), article:not(:first-child), form:not([action="/search/"]), #footer, #sidebar { margin-top: 6px }
.bumar, h1:not(:first-child), fieldset:not(:first-of-type) { margin-top: 8px }
.bmar, .error, .half, #notifs li { margin-bottom: 6px }
.lftpad, .user { margin-left: 6px }
.indt { margin-left: 32px }
.pad, .notice, a.center-text.blk, .desc, #content, #sidebar, #footer, .error, .popup, code.blk, .comment { padding: 4px }
.noborder, iframe { border: none }
.scrl { overflow: auto }
.scrlx { overflow-x: auto }
.scrly { overflow-y: auto }
.noscrl, .comment > :last-child, blockquote { overflow: hidden }
.br, .desc { border-radius: 4px }
.hglt, .desc, .comment, article { background: rgba(255, 255, 255, 0.4) }
.shglt, #content, #sidebar, #footer { background: rgba(255, 255, 255, 0.8) }
code, iframe:not([seamless]) { background: #fff }
code { padding: 2px; }
.mono, .ctrls { font-family: monospace }
.ctrls a { padding: 0 2px }
.grey, a.small, .c-sig, .ctrls a { color: #444 }
.disabled, a.disabled:hover, a.disabled:active { color: #999 }
small, a.small, a.grey, .c-sig > *, .c-sig, .ctrls a, footer, #nav a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .user a, .c-sig a, .ctrls a { text-decoration: none }
small, a.small, footer, .ctrls a { font-size: 0.85em }
small { font-weight: normal }
.c-sig { font: 0.8rem helvetica, sans-serif }
abbr { border-bottom: 1px dashed #222 }
.reference { color: #080 }
.red { color: #f00 }
.green { color: #0b0 }
.large { font-size: 1.2em }
.larger, .ctrls { font-size: 1.4em }
.column-small { -webkit-column-width: 10em; -moz-column-width: 10em; column-width: 10em }
.column-medium { -webkit-column-width: 16em; -moz-column-width: 16em; column-width: 16em }
.column-large { -webkit-column-width: 24em; -moz-column-width: 24em; column-width: 24em }
.flexcont {
display: flex;
flex-wrap: wrap;
}
.flexcont > * { flex-grow: 1 }
.highlight {
color: #fff;
background: #000;
}
.qlist-tags .rit { padding-top: 0.5em }
del { background: #f88 }
ins { background: #8f8 }
del, ins { line-height: 1.3 }
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
.justify { text-align: justify }
.justify::after {
content: '';
display: inline-block;
width: 100%;
}
.answer-count {
display: inline-block;
font-style: normal;
padding: 3px;
background: #6bf;
border-radius: 4px;
color: #000;
}
.limited {
max-height: 64px;
overflow-x: hidden; overflow-y: auto;
transition: max-height 0.5s;
}
.limited:hover { max-height: 128px }
.spoiler { transition: color 0.2s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) *, .spoiler:hover::before { opacity: 0 }
.spoiler::before {
content: 'hover to see spoiler';
position: absolute;
padding: 0.3em;
color: #aaa;
transition: opacity 0.2s;
}
.focused { outline: 3px solid #8bf }
.ta-cont {
width: 100%;
position: relative;
overflow: auto;
border: 1px solid #fff;
}
.code, .code-display {
display: block;
min-height: calc(100% - 2px);
padding: 0;
margin: 2px;
color: #fff;
background: transparent;
font-family: monospace;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 1rem;
line-height: 1.2;
resize: none;
outline: none;
border: none;
padding-left: 4px;
}
.code {
position: absolute;
top: 0; right: 0;
z-index: 1;
color: transparent;
}
.code-display {
width: calc(100% - 4px);
border-left: 1px solid #444;
padding-right: 1px;
}
#caret {
display: inline-block;
position: absolute;
background: #fff;
width: 1px;
}
#caret[hidden] { display: none }
code .line::before {
left: 0;
content: attr(data-linenum);
color: #aaa;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0 2px 0 4px;
position: absolute;
}
code .line.warning::before {
color: #ff6;
font-weight: bold;
}
.ta-cont[data-line="0"] { padding-left: 0.8em }
.ta-cont[data-line="1"] { padding-left: 1.3em }
.ta-cont[data-line="2"] { padding-left: 1.8em }
.ta-cont[data-line="3"] { padding-left: 2.3em }
.ta-cont[data-line="4"] { padding-left: 2.8em }
.ta-cont[data-line="5"] { padding-left: 3.3em }
.ta-cont[data-line="6"] { padding-left: 3.8em }
.ta-cont[data-line="7"] { padding-left: 4.3em }
.ta-cont[data-line="0"] textarea { width: calc(100% - 0.8rem - 5px) }
.ta-cont[data-line="1"] textarea { width: calc(100% - 1.3rem - 5px) }
.ta-cont[data-line="2"] textarea { width: calc(100% - 1.8rem - 5px) }
.ta-cont[data-line="3"] textarea { width: calc(100% - 2.3rem - 5px) }
.ta-cont[data-line="4"] textarea { width: calc(100% - 2.8rem - 5px) }
.ta-cont[data-line="5"] textarea { width: calc(100% - 3.3rem - 5px) }
.ta-cont[data-line="6"] textarea { width: calc(100% - 3.8rem - 5px) }
.ta-cont[data-line="7"] textarea { width: calc(100% - 4.3rem - 5px) }
code .xml-tag { color: #adf }
code .xml-attr { color: #ff7 }
code .xml-attr-ns { color: #fa8 }
code .xml-attr-value { color: #9f9 }
code .processing-instruction { color: #cd8 }
code .cdata { color: #ec8 }
code .entity { color: #f99 }
code .universal { color: #fd8 }
code .at-rule-name { color: #dd8 }
code .element { color: #fb0 }
code .class { color: #ff0 }
code .id { color: #e80 }
code .attribute-name { color: #baf }
code .attribute-value { color: #afb }
code .pseudo-class { color: #9ff }
code .pseudo-element { color: #6fa }
code .nth { color: #ffb }
code .nth .n { color: #f55 }
code .nth .number { color: #f88 }
code .reference-combinator { color: #faa }
code .property, code .logical, code .nth .n, code .colon { font-style: italic }
code .no-nest { color: #ddd }
code .value { color: #aaf }
code .unit { color: #bcf }
code .inline-comment { color: #888 }
code .keyword { color: #fd3 }
code .reserved, code .bad { color: #f00 }
code .constant, code .string .escape { color: #df0 }
code .string { color: #6C3 }
code .regex { color: #ffa }
code .regex .open, code .regex .close, code .regex .modifier { color: #ff0 }
code .regex .escape, code .color { color: #afa }
code .regex .backreference { color: #0f0 }
code .regex .special { color: #faa }
code .regex .grouper { color: #fff }
code .regex .charclass { color: #ffd }
code .regex .charclass { background: #730 }
code .regex .charclass .range { color: #fed }
code .regex .charclass .punctuation, code .function-call { color: #f90 }
code .regex .quantifier { color: #2af }
code .regex .quantifier .punctuation { color: #8cf }
code .regex .modifier, code .generator-star, code .newvar { font-weight: bold }
code .operator, code .generator-star, code .colon, code .value.string { color: #ff8 }
code .operator.assigns, code .equals { color: #8ff }
code .argument, code .number { color: #3df }
code .function-name { color: #f60 }
code .prototype { color: #f00 }
code .punctuation, code .dot { color: #ddd }
code .capvar { color: #9ac }
code .browser { color: #9bd }
.connection-error {
margin-top: 4px;
background: red;
color: #fff;
font-size: 1.5em;
padding: 2px 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
animation: fadein 0.5s;
-webkit-animation: fadein 0.5s;
}
.connection-error a, .connection-error a:visited { color: #ffb }
.connection-error a:hover { color: #ffd }
.connection-error a:active { color: #fda }
.ctrls {
top: 100%; right: -1px;
z-index: 1;
background: #cef;
line-height: 16px;
padding-bottom: 1px;
}
.comment:last-child:not(:first-child) .ctrls {
top: auto;
bottom: 100%;
}
.comment .sctrls {
float: left;
padding: 2px 2px 0 0;
height: 16px;
}
.comment:not(:hover) .sctrls > :not(.clkd) { opacity: 0.4 }
.comment img { max-height: 200px }
.comment .mention {
background: #faa;
border-radius: 4px;
}
.comment.editing { background: #4af }
.comment.deleted::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.comment.deleted::before { background: rgba(255, 128, 128, 0.95) }
#pingsug {
position: absolute;
margin-top: -18px;
}
#pingsug span {
background: #ffa;
padding: 2px;
margin: 0 2px;
}
.c-sig { padding: 2px 0 0 4px }
.c-sig > * { color: #666 }
.ctrls :hover, .diamond { color: #000 }
.ctrls :first-child.clkd { text-shadow: 1px 1px 1px #000; color: #e80 }
.ctrls :nth-child(2):not(:last-child).clkd { color: #0e0 }
.ctrls :last-child { font-size: 0.9em }
.tag {
display: inline-block;
text-decoration: none;
padding: 2px 6px;
margin-bottom: 4px;
background: #afa;
box-shadow: 1px 1px 2px #666;
transition: background-color 0.1s;
}
.tag:hover {
color: #000;
background: #cfc;
}
input[type=text].large, input[type=search].large, input[type=password].large { font-size: 1.3em }
.comment > pre, .comment > blockquote, .comment > p { margin-bottom: 0 }
blockquote {
border-left: 2px solid #f90;
padding-left: 4px;
margin: 0.3em 0 0.3em 2em;
}
code.blk {
white-space: pre;
max-height: 600px;
max-width: 100%;
overflow: auto;
word-break: normal;
hyphens: none;
-webkit-hyphens: none;
}
.md-err {
position: absolute;
z-index: 2;
display: inline-block;
margin-top: -1.3em;
background: #f00;
color: #fff;
padding: 2px 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
animation: fadein 0.5s;
-webkit-animation: fadein 0.5s;
}
@keyframes fadein {
from {
opacity: 0;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
}
h1 small, h2 small { font-size: 0.85rem }
h1 small { margin: 0.5em }
h2 small { margin: 0.2em 0.2em 0 0 }
fieldset {
padding: 0;
border: none;
}
.popup {
position: absolute;
top: 6%; right: 6%; left: 6%;
background: #fff;
box-shadow: 1px 1px 8px #000;
}
.user {
background: #9ef;
color: #000;
min-width: 140px;
max-width: 14em;
display: inline-block;
padding: 4px 8px 4px 4px;
text-align: left;
}
.user div { margin-left: 4px }
.user a { display: block }
.programs { overflow: hidden }
.program {
display: flex;
flex-direction: column;
max-width: 95%;
width: 250px;
max-width: 512px;
height: 250px;
margin: 0 6px 6px 0;
}
.lim-programs .program { height: 200px }
.program .title { flex-shrink: 0 }
.program div {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: auto;
}
.program iframe { flex-grow: 1 }
.programs { max-height: 1000px }
.lim-programs { max-height: 600px }
@media (min-width: 650px) {
.program { width: 300px }
}
@media (min-width: 1100px) {
.program { width: 320px }
}
@media (min-width: 800px) {
.program { height: 300px }
.lim-programs .program { height: 250px }
.programs { max-height: 1200px }
.lim-programs { max-height: 750px }
}
@media (min-width: 1200px) {
.programs { max-height: 1500px }
.lim-programs { max-height: 750px }
}
@media (min-width: 1410px) {
.program { width: 340px }
}
@media (min-width: 1850px) {
.program { width: 360px }
}
@media (min-width: 2900px) {
.programs { max-height: 1800px }
.lim-programs { max-height: 750px }
}
.comment { margin-top: 3px }
.comment #up, .comment #dn { width: 18px }
.comment .hover {
float: left;
opacity: 0.3;
padding: 2px 2px 0 0;
height: 16px;
}
.comment:hover .hover { opacity: 1 }
.comment .rit {
color: #666;
font-size: 0.9em;
}
ul, ol, p { margin: 0.3em 0 0.2em }
#err, .error {
background: #f00;
color: #fff;
}
.notice { background: #ff0 }
#err a { color: #fff }
#err > * {
display: block;
text-align: center;
padding: 3em;
}
.center { margin: 0 auto }
.center-text, #footer, #nav { text-align: center }
.pre { white-space: pre-wrap }
.clear, footer, h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { clear: both }
.clearfix::after, #content::after, #sidebar::after, .comment::after, .user::after {
content: '';
display: block;
clear: both;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0.2em; margin-bottom: 0.2em;
font-family: Tahoma, Helvetica;
}
h1:not(.title), h2:not(.title), h3:not(.title), h4:not(.title), h5:not(.title), h6:not(.title) {
font-weight: normal;
font-family: Verdana;
}
.underline, h1, aside h2 { border-bottom: 1px solid #aaa }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit }
h1 {
font-size: 1.5em;
line-height: 1;
padding-bottom: 1px;
vertical-align: bottom;
}
.comment h1, hr { border-bottom: none }
.title { border: none }
h2, h1.title, article h1 { font-size: 1.3em }
h3, h2.title, article h2, article article h1 {
margin-top: 0.5em;
font-size: 1.1em;
}
a, .ctrl {
color: #000;
transition: color 0.1s;
}
a, button, .ctrl, .up, .dn, .fl { cursor: pointer }
a:visited { color: #444 }
a:hover, .ctrl:hover { color: #15f }
a:active, .ctrl:active {
color: #02d;
transition: none;
}
a.red:hover { color: #f65 }
a.red:active { color: #c00 }
.error a { color: #ffb }
.error a:hover { color: #ff6 }
.error a:active { color: #cc0 }
a.blk {
color: #000;
font-weight: bold;
}
a.blk:hover, a.blk:active { background: rgba(255, 255, 255, 0.2) }
a.blk:active { color: #00f }
input[type=text], input[type=email], input[type=password] { width: 18em }
input[type=text], input[type=email], input[type=number], input[type=search], input[type=password], textarea {
font-family: helvetica;
font-size: 1rem;
}
.score {
float: left;
display: block;
margin-right: 4px;
color: #f00;
padding: 0 4px;
}
.score[data-score="0"] { display: none }
.score[data-score="1"] { color: #888 }
.score[data-score="2"] { color: #666 }
.score[data-score="3"] { color: #444 }
.score[data-score="4"] { color: #222 }
.score[data-score="5"] { color: #000 }
.score[data-score="6"] { color: #001 }
.score[data-score="7"] { color: #002 }
.score[data-score="8"] { color: #003 }
.score[data-score="9"] { color: #004 }
.score[data-score="10"] { color: #005 }
.score[data-score="11"] { color: #006 }
.score[data-score="12"] { color: #007 }
.score[data-score="13"] { color: #008 }
.score[data-score="14"] { color: #009 }
.score[data-score="15"] { color: #00a }
.score[data-score="16"] { color: #00b }
.score[data-score="17"] { color: #00c }
.score[data-score="18"] { color: #00d }
.score[data-score="19"] { color: #00e }
.score[data-score="20"] { color: #00f }
.score[data-score="21"] { color: #33f }
.score[data-score="22"] { color: #66f }
.score[data-score="23"] { color: #f90 }
.score[data-score="24"] { color: #f80 }
.score[data-score="25"] { color: #f70 }
.score[data-score="26"] { color: #f60 }
.score[data-score="27"] { color: #f50 }
.score[data-score="28"] { color: #f40 }
.score[data-score="29"] { color: #f30 }
.score[data-score="30"] { color: #f20 }
.score[data-score="31"] { color: #f10 }
.starcount {
font-weight: bold;
color: #d60;
line-height: 1.2;
}
.starcount[data-count="0"] { display: none }
html, body { height: 100% }
body {
display: flex;
flex-direction: column;
}
body > * { flex-shrink: 0 }
#content { flex-grow: 1 }
#footer {
position: absolute;
width: 100%;
}
#userlist .user { margin-top: 6px }
#mailinput { width: 240px }
#profpic {
max-width: 144px;
max-height: 144px;
}
#profpic + div {
padding-left: 6px;
overflow: hidden;
}
.big-rep { font-size: 1.8em }
#logo-big {
max-width: 100%;
max-height: 180px;
display: block;
margin: 0 auto;
font-size: 5vmin;
}
@media (min-width: 800px) {
#logo-big { max-width: 80% }
}
@media (min-width: 1500px) {
#logo-big {
width: 50%;
max-width: 900px;
max-height: 200px;
}
}
@media (max-width: 600px) {
body { font-size: 0.95em }
}
@media (max-width: 400px) {
body { font-size: 0.9em }
}
@media (min-width: 360px) {
line {
display: inline-block;
width: 1px; height: 1.2em;
background: #888;
vertical-align: sub;
}
}
@media (min-width: 480px) {
.resp-flex { display: flex }
.resp-flex > * { flex-grow: 1 }
}
@media (min-width: 550px) {
section {
padding: 4px;
background: rgba(255, 255, 255, 0.4);
}
.resp-flex > section:not(:first-child) { margin-left: 6px }
}
@media (min-width: 701px) {
.half { float: left }
.half.rit, .half:not(.rit) + .half:last-child { float: right }
.half { width: 49.5% }
}
#nav {
background: #000;
font-size: 0;
}
#nav a {
display: inline-block;
color: #ddd;
font-size: 0.9rem;
line-height: 1.6;
}
#nav span { padding: 0 4px }
#nav nav {
margin: 0 4px;
display: inline-block;
}
#nav #logo {
padding: 0;
line-height: 1;
margin-bottom: 2px;
}
#logo svg {
max-width: 100%;
width: 180px;
padding: 3px 8px;
background: #eee;
transition: background 0.1s;
}
#logo svg:hover { background: #fff }
#logo svg:active { background: #ddd }
#nav form {
min-width: 8em;
width: 100%;
font-size: 0.9rem;
padding: 0 4px;
margin: 2px 0;
}
#nav form input {
width: 100%;
color: #000;
font-size: 16px;
line-height: 1em;
padding: 0 8px;
}
#content { padding-bottom: 24px }
#nav .unread:not(.active) {
background: #d00;
color: #fff;
}
#nav nav > a.active { font-weight: bold }
#nav .unread:not(.active):hover { background: #f00 }
#nav .unread:not(.active):active { background: #c00 }
@media (max-width: 359px) {
#nav #logo { width: 100% }
#nav div {
min-width: 40%;
display: inline-block;
}
}
@media (max-width: 279px) {
#nav.subs div { display: inline }
}
@media (min-width: 360px) {
#nav { text-align: right }
}
@media (min-width: 360px) and (max-width: 799px) {
#logo {
float: left;
margin-right: 4px;
}
#logo svg { width: 145px }
#nav > div:not(:first-of-type) { margin-left: 4px }
#nav div { padding-top: 3px }
#nav form { margin: 3px 0 }
#nav form input { max-width: 18em }
}
@media (min-width: 360px) and (max-width: 499px) {
#nav div, #nav a { display: inline }
#nav .active nav + spacer::after {
content: '\a';
white-space: pre;
}
#nav form {
width: calc(100% - 166px - 2em);
float: right;
}
}
@media (min-width: 500px) {
#nav:not(.sub) {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#nav form {
flex-basis: 10em;
flex-grow: 1;
}
}
@media (min-width: 500px) and (max-width: 799px) {
#logo {
flex-grow: 1;
height: 0;
text-align: left;
}
}
@media (min-width: 645px) {
#nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 799px) {
#nav > div > a.active > span { text-decoration: underline }
#nav :not(.active) > nav { display: none }
#nav nav { background: #333 }
}
@media (min-width: 800px) {
#nav { background: #111 }
#nav > a { transition: background 0.15s }
#nav a:not(.active):hover { background: #333 }
#nav a:hover, #nav .active { color: #fff }
#nav .active, #nav a:not(.active):active { background: #000 }
#logo svg {
width: 165px;
padding: 4px 12px;
}
#nav #logo {
line-height: 0;
margin-bottom: 0;
}
#nav a { line-height: 32px }
#nav div > a { border-right: 1px solid #444 }
#nav div:not(:first-of-type) { flex-grow: 1 }
#nav div:not(:first-of-type) > :first-child { border-left: 1px solid #444 }
#nav a, #nav form {
padding: 0 10px;
background: #222;
}
#nav nav a { background: #161616 }
#nav form {
line-height: 32px;
margin: 0;
max-width: 24em;
}
#nav .active { background: #000 }
#nav a:not(:hover) nav { height: 0 }
#nav > div > a { position: relative }
#nav nav {
position: absolute;
z-index: 3;
top: 100%; left: 0;
margin: 0;
text-align: left;
overflow: hidden;
height: 96px;
transition: height 0.2s;
box-shadow: 1px 1px 8px #000;
}
#nav nav a { width: 100% }
}
@media (min-width: 1400px) {
#content:nth-child(3):nth-last-child(3) {
width: calc(55% + 246px);
max-width: calc(100% - 436px);
overflow-y: auto;
}
#sidebar {
position: absolute;
top: 0; right: 0; bottom: 0;
margin-top: 32px;
width: calc(45% - 252px);
min-width: 430px;
overflow-x: hidden;
}
}